ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
コニファ:ツール紹介やプログラム集・CSSでセンタリンング・まとめ


CSSでセンタリンング・まとめ

divを使用して上下左右にセンタリング

.centered { position: fixed; top: 40%; left: 40%; margin-top: -50px;margin-left: -100px;}
→ サンプル1

divを使用してセマンティックにセンタリング

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic { display: table-cell; text-align: center; vertical-align: middle; }
.block { text-align: center; }
.block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
.sample1 { display: inline-block; vertical-align: middle; }
→ サンプル2

divなどを使用しないでbody全体をセンタリング

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; width: 600px; }
→ サンプル3




 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.