CSSで子要素を親要素の中央に配置する方法

positionを使う方法とflexを使う方法があります。

HTML

	<div class="parent">
		<div class="child"></div>
	</div>

##positonを使う場合

CSS

.parent {
	position: relative;
}
.child {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom :0;
	margin:  auto;
}

※子要素に高さや幅を設定していない場合は、親要素と同じ大きさになります。

##flexを使う場合

CSS

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}
.child {
	width: 100px;
	height: 100px;
}