2

要使元素水平居中，将宽度设置为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>

在 FF10 和 IE8 中使用 HTML 4.01 Transitional 进行测试，并且在 body-section 中只有一个 div-tag。

4

3 回答 3

1

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

如W3C中所述，margin属性包括margin-top和margin-bottom引用包含块的宽度（而不是高度），如果设置在percentages.

因此，您不能像在固定尺寸容器中那样使用margin-top和垂直对齐流体容器。margin-bottom

于 2013-03-13T15:28:01.557 回答
0

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

于 2013-03-13T15:31:17.263 回答
-1

试试这个：

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;
}
于 2013-03-13T15:32:39.143 回答