中央寄せあれこれ

要素を真ん中にしたい、というときのさまざまなやり方。

左右の中央寄せ

テキストや画像などのインライン要素は text-align で中央に寄ります。

<p>中央に寄って</p>

p { text-align: center; }

ブロック要素は何もしないと左に寄ります。
親要素に対して左右均等の空きを取って水平中央に寄せたい時は左右のマージンを auto にします。

<div>中央に寄って</div>

div {
  margin-left: auto;
  margin-right: auto;
}

position: absolute; の要素は親要素の位置を基準にフロートしますので left と right で補助することで絶対的なマージンを取得することができます。

<img src="image.jpg">

img {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

こちらは left と transform を使った合わせ技。

<div>
  <div class="box">真ん中に寄って</div>
</div>

div {
  position: relative;
}
.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

left: 50%; は親要素の div の横幅に対して半分だけ右に移動します。
translateX: -50%; は.box 要素の横幅の半分だけ左に移動します。

水平方向の中央寄せより難しい垂直方向の中央寄せ。
効かないせいで胃がキリキリしないために。

「なんで効かないんだ…」でおなじみの初心者キラー vertical-align は上下の中間を取ってくれるプロパティじゃないんで、そうだと思っていたら今すぐ忘れてください。

<div>
  <div class="box">中段に寄って</p>
</div>

div {
  height: 200px
}
.box {
  vertical-align: middle;
}

これはクソも効かない。
なぜかというと vertical-align はインライン要素同士、串おでんのように真ん中のラインに揃えるというものだから。

table-cell の要素には効く。

.box {
  display: table-cell;
  vertical-align: middle;
}

インラインブロックの画像にも効く。

<div>
  <img src="image.jpg">
</div>

img {
  display: inline-block;
  vertical-align: middle;
}

top と transform を合わせると垂直方向中央にできます。

<div>
  <div class="box">中段に寄って</div>
</div>

div {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

今までのは何だったんだ、ってくらいスイスイ真ん中にくる。
ただし flex が解釈できないブラウザではビクともしないので注意。

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

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