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を修正する(プラグインなし)
  • カスタムフィールドの取り出し&空白チェック
  • カスタム投稿の編集画面からエディタの削除
おすすめの記事
同棲で部屋を借りる費用はいくら?
WEB・Wordpress
同棲を始める部屋を借りるにはいくらかかるのか?敷金や礼金は何の為にいくら払うのか、知っていますか? 物件探しの予算や不動産屋との交渉のために...
【簡単レシピ】野菜のおかずをお弁当に♪
恋愛・同性・結婚
同棲している彼にお弁当♪どうせ作るなら、健康にも気を使ったお弁当にしたいですよね! 冷凍食品を使わずに、自分で心をこめて作った「野菜のおかず...
部屋や服のタバコの臭いを消す方法
ライフハック
同棲相手がタバコを吸う人だと、部屋にタバコの臭いが・・・。 私はタバコを吸う彼や、友人には部屋でなく外で吸ってもらう様にしていますが、たまに...
朝起きない人を起こす方法
ライフハック
朝、中々起きてくれない人って居ますよね。 そんな人を起こすのは一苦労。旦那さんや、同棲している彼氏なら仕事に遅れないか・・・と起こす方が心配...
中指の指輪はダメ!?指と指輪の意味
ライフハック
アクセサリーの中でも、指輪って結婚指輪などもあり、ちょっと特別なものですよね! もちろんファッションで気軽につける事もありますが、それぞれの...
同棲から結婚までの期間は?
恋愛・同性・結婚
結婚する前に同棲を考えている方は多いと思います。恋人と毎日一緒に過ごせる生活はとても楽しそう。でも気になるのは「同棲から結婚につながるのか」...