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

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

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

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

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

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

コメントは受け付けていません。

関連記事

カスタム投稿の編集画面からエディタの削除
WEB・Wordpress 2017.12.04

カスタム投稿の編集画面からエディタの削除

特定ページの編集画面からエディタを削除
WEB・Wordpress 2017.12.04

特定ページの編集画面からエディタを削除

CSSで文字装飾
WEB・Wordpress 2018.03.17

CSSで文字装飾

同棲で部屋を借りる費用はいくら?
WEB・Wordpress 2015.12.29

同棲で部屋を借りる費用はいくら?

【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う
WEB・Wordpress 2018.02.21

【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う

Amazonで買える♪引越し挨拶用の品物・粗品・熨斗
WEB・Wordpress 2016.03.26

Amazonで買える♪引越し挨拶用の品物・粗品・熨斗