幅・高さが不明な要素を上下左右中央配置する

昨日の記事の発展版。

• 高さが不明な要素を上下中央配置する

といっても特殊なことは全然なくて、やはり引き続き transform:translate を使う。

• デモ : 幅・高さが不明な要素を上下左右中央配置する
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

top:50% の他に left:50% も入れ、transform:translate(-50%, -50%) で X 方向と Y 方向の両方を自分の要素の半分だけマイナス方向にズラしてやるだけ。

position:absolute で浮かしたボックスの幅って、内容物によって決まるもんなのねー。ブロックモデルだと思って幅は基本 100% になってるんじゃないかなって思いがあったけど、translateX(-50%) で良いワケだ。

ちなみに transform プロパティは、transform:translateX(-50%) translateY(-50%) といった書き方で複数指定もできるらしい。書いた順に1つずつ変更が有効になっていくので、変形させる順番に注意。