為什麼 `margin: auto auto;` 不垂直居中 Div？-css教學-PHP中文網

為什麼 `margin: auto auto;` 不垂直居中 Div？

Patricia Arquette

發布： 2024-12-11 09:08:14

原創

434 人瀏覽過

Why Doesn't `margin: auto auto;` Vertically Center a Div?

使用 margin:auto 垂直對齊 Div

而 margin: 0 auto;可以使div水平居中，margin: auto auto;未如預期垂直對齊。另外，垂直對齊：中間；對於區塊級元素無效。

為什麼垂直自動邊距失敗

margin-top: auto 和margin-bottom: auto 計算為零，不提供居中效果。
margin-top: -50% 計算其相對於包含區塊的寬度而不是高度的值。

使用巢狀元素的解決方法

一個可行的解決方法是嵌套三個元素：

.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中文網其他相關文章！