CSS

2017/05/18

可変長ボックスの縦位置中央もその4まで来ました。この辺りで最後ですね。今回は何かと話題のflexboxを使った方法です。flexboxは結構沢山設定項目がありまして、私も現在、実際使いながら勉強中です。flexbox自体はまた別の機会にまとめてみたいと思います。

親要素にdisplay:flex;を設定します。すると子要素が自動的にflexboxコンテナーとなります。あとはflexbox関連の横位置中央と、縦位置中央のプロパティーを設定すればオッケーです。

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%;
  display:flex;            /* 子要素がflexコンテナーになる */
  justify-content:center;  /* 子要素が水平位置中央に来る */
  align-items:center;      /* 子要素が垂直位置中央に来る */ 
}
.c_box{
  background-color:#00f;
  width:50%;
  height:50%;
}

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

あまりなじみのないプロパティかもしれませんが親要素に3行書くだけですのでとっても簡単であっさりしていると思います。