場面中央にdivブロックを設置するような画面構成ってあると思います。
ログイン画面とか・・・・。
というわけで、divブロックを中央に設置してみます。
目標
画面の中央にdivブロックを設置する！sample.html
<!DOCTYPE html> <html> <head> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <link href="./samplecss.css" rel="stylesheet" type="text/css" /> <title>sumple</title> </head> <body> <div id="container"> <header>ヘッダーだよ</header> <main>メインだよ <div id="item">中央に寄せるdivだよ</div> </main> </div> <footer>フッターだよ</footer> </body> </html> |
samplecss.css
* { margin: 0px; padding: 0px; } html { height: 100%; } body { height: 100%; } #container{ height: 100%; } header{ position: fixed; width: 100%; background-color: #9999CC; height: 30px; z-index: 20; } main{ display: block; height: 100%; background-color: #FFAAAA; position: relative; } #item{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto; width:200px; height:200px; background-color: #88FFFF; } footer { height: 30px; position: fixed; bottom: 0; width: 100%; background-color: #AAFFAA; } |
表示例
ポイント！
中央に設置する要素の親はすべてhight:100%を指定して、要素には以下を指定する。
| position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto auto; |
z-indexを指定して隠れないように前に出してしまう。
以上、参考になれば幸いです。
0 件のコメント:
コメントを投稿