要素をページの中央に配置したい場合は、「margin:0 auto;」 で対応できますが、縦方向の中央配置に関しては「vertical:middle; 」では対応してくれません。そこで、上下左右ともにセンタリング配置したい場合は、その要素に対して「display: table;」かつ「display:table-cell;」と「vertical-align:middle;」を組み合わせて指定することで可能となります。
それでは、サンプルを見ていきましょう。
1.HTMLを記述
1 2 3 |
<div id="contents"> <p>センタリング配置したい</p> </div> |
2.CSSを記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
html { display: table; width: 100%; height: 100%; } body { display: table-cell; vertical-align: middle; color: #333; font-size: 12px; line-height: 1.5; } #contents { width: 500px; height: 100px; line-height: 100px; margin: 0 auto; padding: 15px; background: #FFF; box-shadow: 0 0 20px #aaa; border-radius: 5px; text-align: center; } |
これで、上下左右からのセンタリングが可能になります。