ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

CSS中央配置 4つの方法

CSSの中央配置でよく使う3つの方法をコピペできるようにまとめてみました。

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;
 }
子ボックス

新しい記事

東京のWEB制作会社イッティ