「margin: auto auto;」が Div を垂直方向の中央に配置しないのはなぜですか?

margin:auto で Div を垂直に配置

while margin: 0 auto; div を水平方向に中央に配置できます。マージン: auto auto;意図したとおりに垂直に整列しません。さらに、vertical-align: middle;はブロックレベルの要素には無効です。

垂直自動マージンが失敗する理由

• margin-top: auto および margin-bottom: auto ゼロに計算し、センタリングを提供しない効果。
• margin-top: -50% は、高さではなく、含まれるブロックの幅を基準にして値を計算します。

ネストされた要素を使用した回避策

実行可能な回避策の 1 つは、3 つをネストすることです。要素:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    position: absolute;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    position: relative;
    top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div>

このソリューションでは:

• 外側の .container 要素はテーブルのような構造を確立します。
• .helper 要素は垂直方向の中点にあるコンテンツ。
• .content div は .helper 内に配置されており、マージン 0 auto; を付けて水平方向に中央揃えにします。

以上が「margin: auto auto;」が Div を垂直方向の中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。