課題
人類が月面に到達したのは44 年も前なのに、 CSSではいまだに縦方向
の中央揃えもできていません。
— JamesAnderson(twitter.com/jsa/status/358603820516917249)
CCSSを使って要素を横方向に中央揃えするのはとても簡単です。イン
ライン要素であればその親要素で text‐align:center;を指定し、ブ
ロック要素ならその要素自身に margin:autoを指定するだけです。一
方、要素を縦方向に中央揃えしようとしたら、考えるだけで気分が悪くな
ってくるかもしれません。
数年にわたって、縦方向の中央揃えは手の届かない目標のひとつでし
た。フロントエンド開発者の間では、これを行おうとしてもただのジョー
クとしか扱われませんでした。以下のような事情も重なって、縦方向の中
央揃えは特別扱いされています。
ここ数年の間、フロントエンド開発者たちは知恵を絞ってこの難問に取
り組んできました。しかし、編み出された解決策のほとんどは、ハックと
しか言いようのないものばかりでした。このシークレットでは、最新のテ
クニックにもとづいて汎用的な縦方向の中央揃えを実現します。以下のテ
クニックもよく使われますが、ここでは利用しません。
縦方向の中央揃え
40
とても頻繁に必要とされます。
きわめて簡単かつシンプルに実現できそうに思えます。
しかし実際には、信じられないほど達成が困難でした(特に、サイズが可
変の場合)。