要素を上下左右でセンタリングする方法

center-tit

要素をページの中央に配置したい場合は、「margin:0 auto;」 で対応できますが、縦方向の中央配置に関しては「vertical:middle; 」では対応してくれません。そこで、上下左右ともにセンタリング配置したい場合は、その要素に対して「display: table;」かつ「display:table-cell;」と「vertical-align:middle;」を組み合わせて指定することで可能となります。

 

それでは、サンプルを見ていきましょう。

 

1.HTMLを記述

 

2.CSSを記述

これで、上下左右からのセンタリングが可能になります。

 center-image

 

デモサンプル

 




 

タイトルとURLをコピーしました