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を修正する(プラグインなし)
  • カスタムフィールドの取り出し&空白チェック
  • カスタム投稿の編集画面からエディタの削除
おすすめの記事
部屋の臭いを消す方法
ライフハック
同棲している部屋は、快適な空間にしたいですよね。部屋の臭いもできるだけクリーンにしておきたいですよね。 部屋の臭い、自分の家は大丈夫だと思っ...
恋愛・同性・結婚
恋人のご両親に同棲の挨拶に行く事になったら、少しでも好感を持ってもらいたいですよね。特に挨拶がご両親との初対面となる場合は、最初の印象が大切...
【簡単レシピ】炊飯器で簡単パン作り♪
ライフハック
焼きたての手作りパン、美味しいですよね。 家で作ろうとすると、長時間こねる必要があり力も時間もかかって大変。ホームベーカリーなら簡単にパンが...