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

上下左右中央寄せのデザインは多々使う機会があるものの、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の関連記事
  • CSSで文字装飾
  • display:flexで中央寄せ、右寄せ、均等配置
  • 【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う
  • カスタムタクソノミ―のURLを修正する(プラグインなし)
  • カスタムフィールドの取り出し&空白チェック
  • カスタム投稿の編集画面からエディタの削除
おすすめの記事
家電が安い時期はいつ?!
ライフハック
新居で同棲を始めるとき、せっかくだから家電も一新したいと思いませんか?ですが、家電には安く買える『時期』があります。最初に慌てて買わずに、家...
ナンプラーの代わりになる代用品レシピ
ライフハック
エスニック系の料理や、隠し味に使える調味料「ナンプラー」。 あればいいけど、わざわざ買いたくない調味料の1つでもあります。 そんなナンプラー...
冷蔵庫の臭いは掃除+αで徹底消臭
ライフハック
普通に使っていてもいつの間にか冷蔵庫が臭いと感じる事ありませんか? 特に臭いの強い物を入れてないのに何か変な臭いがしたり、他の食べ物になぞの...
セロリの葉っぱの美味しい使い方レシピ
ライフハック
苦手な方もいますが、私はセロリが大好きでよく購入します。 セロリの茎の部分をピクルスにして常備菜にしています。忙しくて自炊できない日も、気軽...