恋愛・ライフハックからWordPressのカスタマイズメモ

Koeda Blog

WEB・Wordpress

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

投稿日:2017年12月1日 更新日:

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

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

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

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

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

-WEB・Wordpress

Copyright© Koeda Blog , 2018 All Rights Reserved Powered by STINGER.