positionを使用した上下左右中央寄せ

上下左右中央寄せのデザインは多々使う機会があるものの、html・CSSで書くのは案外面倒くさいですよね。

今回はPositionを使用しての上下左右中央寄せを。

positionを使用した上下左右中央寄せ

下記CSSで子要素を左右中央寄せにできます。

親要素{
	width:100%;
	height: 500px;
	position: relative;
}
子要素{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}