2016-04-17

stylesheet:ブロック要素の上下左右センタリング

参考:
http://ideahacker.net/2015/02/14/9779/



ブロック要素の上下センタリングに"left: 0;"と"right: 0;"を追加する。
(center-wrapperとcenter-HV-block以外のクラス指定は体裁を整えるためのもの)
  1. <div class="center-wrapper outerbox-decoration">
  2. <div class="center-HV-block innerbox-decoration">
  3. <span>ブロック要素(div要素、このskyblueのボックス)を<br>上下左右センタリング</span>
  4. </div>
  5. </div
  1. .center-wrapper{
  2.     position: relative;
  3. }
  4. .center-HV-block{
  5. position: absolute;
  6. top: 0;
  7. bottom: 0;
  8. right: 0;
  9. left: 0;
  10. margin: auto;
  11. }
  12. .outerbox-decoration{
  13.     margin: 0 auto;
  14.     width: 600px;
  15.     height: 300px;
  16.     background: skyblue;
  17. }
  18. .innerbox-decoration{
  19.     width: 400px;
  20.     height: 200px;
  21.     background: lightgreen;
  22. }

サンプル
サンプル(ウインドウに対して上下左右センタリング)


以上