以前にも一度、画面中央配置の記事を書かせていただきました。「特定の要素を画面の中央(上下左右)に配置する方法」こちらは「display:table-cell」を扱った中央配置の方法でしたが、今回はCSSのみで実現できる方法になります。
まずはデモサンプルを確認してみてください。
それでは見ていきましょう。
HTMLを記述
1 2 3 |
<div id="content"> <p><a href="#">画面中央にコンテンツを配置したい!</a></p> </div> |
CSSを記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#content { position: absolute; top: 50%; left: 50%; height: 120px; width: 360px; margin-top: -60px; margin-left: -180px; } #content a{ color: #fff; font-size:100%; text-align: center; background: #3a999c; border-radius: 5px; padding:20px; box-shadow: 0 5px 5px #ccc; } #content a:hover { background: #257b7e; } |
中央に配置するコンテンツのサイズは任意で調整してみてください。CSSのみで画面中央寄せができるのでこちらも活用できそうですね。
以上になります。