Twitter

divをウィンドウの上下左右中央に配置する

divをウィンドウの上下左右中央に配置する

ずいぶん前から知られている技術ですが、まれに必要に迫られた時に必ず忘れているのでメモ。

divをウィンドウの上下左右中央揃えにする場合、親となるbodyに対してpositionを使用し絶対配置で配置します。
このときに指定する値はtop50%、left50%となります。これでdivの基準点が中央の指定となりますが、divの基準点は左上なのでこの位置からdivの幅の半分とdivの高さの半分のネガティブマージンでさらに位置を調整します。
実際のサンプルコードは以下の通り。

<!-- html -->
<body>
	<div id="hoge">上下左右中央のコンテンツ</div>
</body>
/* css */
body { /* 省略可 */
	position: relative;
	width: 100%;
	height: 100%;
}

#hoge {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 300px;
	margin: -150px 0px 0px -200px; /* 幅と高さの半分のネガティブマージン */
}

また、heightが決まっている領域で上下左右中央揃えにする場合は少し複雑になりますが、[ヨモツネット]さんのこちらのエントリーが参考になるかと思います。


0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2018 2GRAVITY All Rights Reserved. | powered by WordPress

Page top