Question

要将元素水平居中，可将宽度设置为x，左侧设置为50%，将边距设置为-x/2。这与x = 50 %完美配合（参见下面的示例）。为什么它不适用于垂直居中？以下示例不起作用。

div.myDiv {
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -25%;
    position: absolute;
    border: 1px solid #555;
}

<div class="myDiv">I'm a div</div>

使用HTML 4.01 Transitional在FF10和IE8中测试，并且在正文部分只有一个div-tag。

Answer 1

您没有固定的宽度和高度（流体）。所以你不能只使用你在帖子中提到的CSS来垂直居中。你需要使用javascript或jQuery来实现这一目标。我以前做过这个，所以我只是在这里链接它。 https://stackoverflow.com/a/15293191/1577396

正如W3C中所述，包含margin和margin-top的{{1}}属性引用了包含块的宽度（不是身高），如果设置在margin-bottom。

因此，您无法使用percentages和margin-top垂直对齐流体容器，如同固定尺寸容器中的情况一样。

Answer 2

垂直居中可以在css中使用display: table-cell或摆弄line-height来完成 - 只是你玩的起点

Answer 3

试试这个：

div.myDiv {
margin: 0 auto;
}

auto will get you the horizontal centering you are looking for OR you can just set auto for the entire myDiv to get both vertical and horizontal centering.

div.myDiv {
margin:auto;
}

使用CSS垂直居中元素（margin-top，top）

3 个答案: