CSSで縦横センタリング

縦横ともにセンタリングする方法を CSSで実現してみます。

縦調整のために spanタグを挿入

<div id="center_pos"><span></span><img src="images/centering.gif"></div> 

表示領域と横のセンタリング

#center_pos {
  width: 100%;
  height: 300px;
  display: block;
  text-align: center;
  background-color: #f9f6f1;
}

※ divタグのようなブロックレベル要素をセンタリングするには「text-align: center;」ではなく「margin: 0 auto;」を利用して横センタリングを行う必要があります。

spanタグを利用して縦のセンタリング

#center_pos * {
  vertical-align: middle;
}
#center_pos span {
  display: inline-block;
  height: 100%;
  width: 1px;
}

結果