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を修正する(プラグインなし)
  • カスタムフィールドの取り出し&空白チェック
  • カスタム投稿の編集画面からエディタの削除
おすすめの記事
【エイプリルフール】彼氏にNGな嘘ネタ
恋愛・同性・結婚
4月1日のエイプリルフール。エイプリルフールに、彼氏にどんな嘘をつこうか悩んで居る方もいるんじゃないでしょうか? エイプリルフールにどんな嘘...
WEB・Wordpress
吹き出し風1 テキスト装飾サンプル p.txt01{ font-size: 30px; position: relative; paddin...
同棲のイライラ・ストレス解消法
恋愛・同性・結婚
今まで別々に住んでいた相手と一緒に住むのですから、同棲って大変な面もあります。 環境の変化もあり、イライラしてしまい相手に冷たく当たってしま...
エアコンの設定温度、冬は何度?
ライフハック
同じ部屋で過ごしていると人の体感温度って違ったりしますよね。 エアコンをつけたくても、片方が暑がりだったり、寒がりだったりすると中々お互いが...
レンジの臭い取り。家にあるもので解消
ライフハック
電子レンジでチーズポップコーンを作りました♪ 美味しく出来たのですが、電子レンジがチーズの臭いでいっぱいに。自然に臭いは消えてくれると思って...