2

ドキュメントの中央に div を配置しようとしていますが、水平方向には機能しますが、垂直方向には機能しません:

width: 950px;
height: 630px;
background: #FFFFFF;
margin: auto;

margin: autoそれが入っているもの（この場合はページ自体）の中央に配置するべきではありませんか？以前はこれに対する回避策がありましたが、機能させることができません。また、自分が間違っていることを知っているといいので、やめることができます。

4

2 に答える 2

6

margin: auto要素を垂直方向に整列しません。

古いブラウザーをサポートする必要がある場合は、div に固定の高さを定義する必要があります。

div {
    position: relative;
    top: 50%;
    width: 750px;
    height: 500px; /* sample. adjust as needed */
    margin: -250px auto 0; /* half the height */
}

これがフィドルです：http://jsfiddle.net/2qmVX/

IE8 以下を気にしない場合は、これにより流動的な高さを維持できます。

div {
    position: relative;
    top: 50%;
    margin: auto;
    transform: translateY(-50%);
    /* add prefixed versions... */
}

フィドルは次のとおりです: http://jsfiddle.net/VMaVM/ (覚えておいてください: 最新のブラウザーのみ)。

更新: @FabrícioMatté で指摘されているように、html&body要素にも 100% の高さを適用する必要があります。

html, body {
    height: 100%;
}

上記のデモを参照してください。

于 2012-11-12T01:29:01.557 に答える
3

適切な垂直センタリングは、CSS3 でさえまだカバーされていないものです。

幸いなことに、高さが固定されているため、top/leftプロパティを操作して負の値を使用margin-topし、ポジショニングを使用margin-leftして目的の動作を実現できます。absolute

background: #FFFFFF;
width: 950px;
height: 630px;
top: 50%;
left: 50%;
margin: -315px 0 0 -425px; /*top is negative half of height, same for width*/
position: absolute;

デモ/ソース

よりも小さい解像度では、負のマージンが予期しない動作をする可能性があることに注意してくださいdiv。

これは、テーブルを使用した、もう少しハックな方法です。基本的な考え方は、 CSS プロパティをテーブルに適用すると、古い属性vertical-align:middleと同じ効果があるということです。valign="center"したがって、HTML は次のようになります。

<table class="vcenter"><tr><td>
    <div id="myDiv">This is a centered div</div>
</td></tr></table>

そしてCSS：

.vcenter {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
#myDiv {
    background: #FFF;
    width: 950px;
    height: 630px;
    margin: 0 auto;
}
html, body { height: 100%; }

デモ/ソース

この方法の利点は、IE6 以降、Firefox、Chrome、Opera、および Safari でテストされている、完全にクロスブラウザーであることです。動作するはずですが、モバイルブラウザーではテストしませんでした。また、解像度が小さい場合のスクロールの問題もありません。このハックは、実稼働サイトの 1 つで中心化されたモーダルに使用します。

于 2012-11-12T01:29:02.533 に答える