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

2020-01-202021-05-08CSS フレックスボックス,CSS

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

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

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

flexbox（display:flex）xを使った子要素の縦横中央揃えをする方法は簡単で、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;」を追加で指定します。

#container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#container div{
	margin: 1px;
	width: 100px;
	padding: 10px;
	color: #FFF;
	background: #000;
}