ページ上の <div>
要素を縦横ともに中央に配置する最善の方法は?
margin-left: auto; margin-right: auto;`で水平方向にセンタリングできることは知っていますが、垂直方向にもセンタリングするにはどのような方法がありますか?
**私のdabblet.comでのデモをご覧ください。
このデモの主なトリックは、通常の要素の流れでは、上から下に向かっていくので、margin-top: auto
がゼロに設定されています。しかし、絶対的に配置された要素は、自由空間の配分については同じように作用し、同様に、指定された top
と bottom
で垂直方向の中央に配置することができます (IE7では動作しません)。
div
でも動作します。div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
ここでは、私が少し前に書いたスクリプトを紹介します(※jQueryライブラリを使って書かれています)。
var centerIt = function (el /* (jQuery element) Element to center */) {
if (!el) {
return;
}
var moveIt = function () {
var winWidth = $(window).width();
var winHeight = $(window).height();
el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
};
$(window).resize(moveIt);
moveIt();
};