为什么 `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中文网其他相关文章！