http://ideahacker.net/2015/02/14/9779/
ブロック要素の上下センタリングに"left: 0;"と"right: 0;"を追加する。
(center-wrapperとcenter-HV-block以外のクラス指定は体裁を整えるためのもの)
- <div class="center-wrapper outerbox-decoration">
- <div class="center-HV-block innerbox-decoration">
- <span>ブロック要素(div要素、このskyblueのボックス)を<br>上下左右センタリング</span>
- </div>
- </div
- .center-wrapper{
- position: relative;
- }
- .center-HV-block{
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- margin: auto;
- }
- .outerbox-decoration{
- margin: 0 auto;
- width: 600px;
- height: 300px;
- background: skyblue;
- }
- .innerbox-decoration{
- width: 400px;
- height: 200px;
- background: lightgreen;
- }
サンプル
サンプル(ウインドウに対して上下左右センタリング)
以上