どもです。
今日の帰りはゲーム屋に寄って、安く売ってたら見つからないゲームを買い直そうと決めた餅。です。

まぁあくまで安売りしてたらですが…安いといいなぁ。

さて、本日は久しぶりにCSSの話題。

ブロック要素を上下左右の中央に置きたい。
よくある話…ではないですが、カップラーメンを無性に食べたくなるくらいの頻度でやりたくなることだと思います。

んで、最も一般的な方法はネガティブマージンを使う技なのですが…

シンプルで良いのですが、コンテンツの高さが明確でない場合には使えないのは問題です。

今回はこのやり方だと都合が悪かったので、display:table-cellを使うやり方をしてみました。

が、今までこちらの方法をよく理解してなかったので改めて。

ネガティブマージンを使うときと比べると、入れ子がひとつ多くなるのが注意点ですかね。

まずは親要素をdisplay:tableにします。

次に子要素をdisplay:table-cellにし、vertial-align:middleに。
これで要素の上下方向の中央揃えが完了です。

が、ここまでだと上下方向だけなので、更にdisplay:inline-blockの孫要素を入れて子要素をtext-align:centerに。
これで上下左右の中央揃えが完了です。

ちなみに、孫要素をblockにし、margin:autoでも正常に表示されました。
table要素の中のblock要素っていうのが記述的におｋなのかわからなかったので、安全策を取って今回はinline-block要素に。