ほりくり@ほりでぃWebクリエーター

divタグで縦に中央配置する方法

投稿日:2013年7月3日

DIVタグのようなブロッグ要素では横の配置は設定できるが
縦方向に関しては上揃えになってしまう。

divタグで強引に縦中央配置するばあい
スタイルdisplayにtable-cellを指定すればできる

<div style="display:table-cell; height:150px; background-color:#ffdddd; vertical-align:middle;">
縦に中央配置
</div>



縦に中央配置

これでTableのセルと同じ扱いになり
vertical-alignにmiddleを指定するい事により
DIVの縦中央に表示できるようになる。