display:flexで子要素を縦横中央揃えをする方法

CSS,CSS フレックスボックス

display-flexで子要素を縦横中央揃えをする方法

CSSのdisplay:flexを使って子要素を縦横中央揃えにする方法の紹介です。

display:flexで子要素を縦横中央揃えをする方法

See the Pen CSS Vertical and horizontal center (display:flex) by yochans (@yochans) on CodePen.

display:flexを使った子要素の縦横中央揃えをする方法は簡単で、display:flexを指定した親要素に「align-items: center;(縦の中央揃え)」と「justify-content: center;(横の中央揃え)」を追記するだけです。

<div class="container">
	<div>縦横中央揃え</div>
</div>
.container{
	display:flex;
	width:100%;
	height:300px;
	background:#0D47A1;
	color:#FFF;
	font-size:50px;
	justify-content: center;
	align-items: center;
}
.container div{
	color:#FFF;
	font-size:50px;
	font-weight: bold;	
}

親要素への指定だけで実装できmarginもpaddingも気にする必要もなく、数あるCSSの縦横中央揃え方法の中で一番好きな方法かもしれません。

複数の子要素があり、折り返す場合

See the Pen CSS Vertical and horizontal center (display:flex)2 by yochans (@yochans) on CodePen.

複数の子要素があり、折り返す場合は、親要素に「flex-wrap: wrap;」を追加で指定します。

flex-wrap: wrap;