【CSS3】新しいプロパティで要素を上下中央に配置する方法！！

css

ここ最近は、CSS3もだいぶ使えるような環境が整ってきたのですが、少し要素を上下中央に揃えたいときもあると思います。その際にCSS3の新しいプロパティを使えば割とすんなり実現出来るようなので、メモしておきます。

上下中央にするCSS3の設定

要素を上下中央に設定するには、CSS3の新しいボックスレイアウトのflexプロパティを使うんですが、以前も水平方向と垂直方向に関する記事を書いたので詳しいことが知りたい方は下記の記事をご覧ください。

【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは！？

ソースコード

html要素

今回、上下中央に揃えるボックス要素のhtmlは下記のようにしました。




  

    
ボックス要素

    
上下中央に配置してみる。

CSS要素


.wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height:200px;
}

.wrap section {
  margin: 10px;
  background: #F5F0CF;
  padding: 15px;
}

justify-contentプロパティによる中央揃え

まず水平方向の中央に配置するには、flexプロパティを設定した親要素にjustify-contentプロパティでcenterを指定することで子要素が水平方向で中央に配置されます。

align-itemsプロパティによる中央揃え

垂直方向の中央に配置するには、flexプロパティを設定した親要素にalign-itemsプロパティでcenterを指定することで子要素が垂直方向で中央に配置されます。

ただ注意点として親要素の高さを設定してあげないと、垂直方向での中央揃えにはならないのでご注意ください。
上のサンプルでは、分かるように親要素にグレーの背景色を設定しています。そうすると子要素であるsectionが上下中央に配置されているのが分かると思います。