CSS

2017/05/17

縦位置中央の3つ目の方法です。これはpositionを使ったオーソドックスな方法です。CSSのpositionは便利なプロパティーですね。positionは指定がなければstaticで通常配置になります。 relativeを指定すると、通常の配置なんですがtopやleftなどを使用して、通常の配置を基準に配置場所を移動できるようなります。基本は、通常配置になります。 absoluteを指定すると絶対配置ということで配置の基準が通常の配置場所ではなくなります。祖先をたどっていってpositionにrelativeかabsoluteが指定されている要素を基準にします。それがなければbody要素を基準としますのでブラウザの左上基準になります。

可変長のボックスにpojition:relativeを設定しておいてtopやleftなど指定しないでおけば、通常配置のボックスと同じです。その可変長ボックスの中にpodition:absoluteを指定したボックスを配置して縦の余白の半分をtop位置に指定すれば常に縦位置中央になります。

HTML

<div class="p_box">
  <div class="c_box">
  </div>
</div>

CSS

html,body{
	height:100%;
}
.p_box{
  background-color:#ff0;
  width:50%;
  height:50%;
  position:relative;　　　/* 特に位置指定がないので通常の場所 */
}
.c_box{
  background-color:#00f;
  width:50%;
  height:50%;
  position:absolute;
  top:25%;               /* 高さが50%なので余白が50% その半分の25% */
  left:25%;　　　　　　　　/* 幅も同様に25% */
}

サンプルを別ウィンドウで開く諸般の都合で別ウィンドウになります。

positionは分かってしまえばシンプルですので一番使いやすいと思います。