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

上下左右中央寄せのデザインは多々使う機会があるものの、html・CSSで書くのは案外面倒くさいですよね。
今回はPositionを使用しての上下左右中央寄せを。
positionを使用した上下左右中央寄せ
下記CSSで子要素を左右中央寄せにできます。
親要素{ width:100%; height: 500px; position: relative; } 子要素{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
関連記事