White Space
WebLife

CSS で上下/左右の中央寄せする方法

  • CSS

下記の HTML の構造で.child要素を中央に寄せます。

<div class="parent">
  <div class="child">
    ...
    画像やテキストなど
    ...
  </div>
</div>

display flex

最も安定している（と思っている）中央寄せの方法です。.child のスタイル指定は必須ではありません。

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    flex: 1 1 0%;
}

基本的にこの要素に width, height などを指定しても問題ありませんが、IE11 は注意します。flex 要素に min-height を指定し、その中の画像などを中央に寄せようとすると大変なことになります。

もし IE11 も対応範囲にいれるならこの flex 要素の子要素には flex-basis, flex-shrink, flex-grow の指定をしてあげた方が良いでしょう。 ショートハンドが使えるのでflex: 1 1 0%;とすると楽です。

transform translate

ずらしてずらしてを繰り返して中央にもってくる方法です。一番トリッキーな感じがします。動きが変なのであまり好きではないのですが、理にかなっていて安定しています。flex でどうしてもうまくいかない場合はこちらがおすすめです。

.parent {
    position: relative;
}
.child {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

position absolute

position: absolute;を使用する方法です。中央寄せにする要素には width と height の指定が必須なため、テキストなど可変する要素に対してはあまり使えません。画像の中央寄せに使えますが、たいていは前述した flex 要素や transform での中央寄せで十分です。

.parent {
    position: relative;
    width: 500px;
    height: 500px;
}
.child {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}