block要素を上下中央揃え(真ん中)にする。
ベンダープレフィックスなしで動作する。
IE11問題なし。
サンプル
See the Pen flexbox > 上下中央揃え by 125naroom (@125naroom) on CodePen.
HTML
正方形の真ん中にflexboxと書く場合。
<div class="container">
<p>flexbox</p>
</div>
CSS
250pxの正方形の真ん中にテキストを持ってくる場合のCSS。
.container {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
background: #e6de6b;
}
.container p {
color: #ffffff;
font-weight: bold;
}