CSS中央配置 4つの方法
CSSの中央配置でよく使う３つの方法をコピペできるようにまとめてみました。
BOX内で中央配置するCSSで、よく使う4つの方法です。
テキストが一行で、中央配置するCSS
テキストが一行の場合のみ有効な方法で、最も簡単な中央配置方法です。
BOXの高さが100pxなら、テキストのline-heightを100pxにするだけでもOKです。
ブラウザによっては若干ズレます。
.box {
text-size:12px;
line-height: 100px;
text-align: center;
}
一行テキスト
テーブルセルにして中央配置するCSS
BOXをテーブルセル（display: table-cell;）にして、中央配置する方法です。
画像やテキストの中央配置では使われる方法でした。
テキストが複数行でもOKですが、BOXにマージン（margin）を指定しても効かなくなります。
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
子ボックス
ポジション0で中央配置するCSS
センターに配置する要素（ボックスやイメージ）の高さ・幅を指定する必要があります。
IE8対応の案件でも使えます。
.wrap {
position: relative;
}
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
width: 100px;
}
ここは親ボックスの「wrap」
ここは子ボックス
Flex boxで中央配置する
flex boxでも中央配置できます。今後はこの方法がトレンドになるかと思います。
親となるボックスにflex boxを適用します。
.wrap {
display:-webkit-flex;
display:flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
子ボックス
