CSSで最高のセンタリングを

CSSで上下左右のセンタリングを行うのは意外と面倒。CSSだけで行おうとすると普通はtable-cellとvertical-alignを組み合わせる方法があります。また、position:relativeでtopから50%とleftから50%、さらにネガティブマージンで調節する方法もメジャーです。

でもこれらの方法はぶっちゃけ使いづらい上に不自然なオプションを付加させているのが気になります。divをtableにするってどうなのよ。でも動的にJavascriptでやるのも無駄が大きいしページ全体のロードが終わってからじゃないと実行されないので遅い回線やPCだとセンタリングに時間がかかります。CSSのレンダリングはやっぱり爆速ですからね。

で、CSS-Tricsというサイトですごい解決策が考え出されました。

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

ちょっと感動しました。これほど美しい方法があったなんて。transformはIE9からじゃないと使えないけど、ここは古いブラウザ使っている人に涙をのんでもらいましょう。