在视口中垂直和水平居中 HTML 元素的最佳方法是什么？

Question

假设我想在我的视口中心放置一个元素以用作弹出消息。它应满足以下要求：

• 即使元素大小动态变化，元素也应在浏览器中保持居中（水平和垂直）
• 如果调整浏览器大小，元素应保持居中
• 不允许使用 Javascript
• 仍可在 IE7 上运行

有没有更好的方法来实现这一点，而无需使用下面的基于表格的解决方案？

<table style="position:absolute;width:100%;height:100%">
    <tr>
        <td align="center">
            <span id="centeredContent">I always remain centered</span>
        </td>
    </tr>
</table>

Answer 1

最好的解决方案（在我看来）是使用绝对定位将元素的左上角放置在 50%/50% 处，然后使用负边距将元素推回中心。唯一的缺点是您必须指定元素的宽度和高度。这是一个例子：

HTML：

​<div id="centerme">
    Hello, world!
</div>​

CSS：

​#centerme
{
    position: absolute;
    left: 50%;
    top: 50%;

    /* You must set a size manually */
    width: 100px;
    height: 50px;

    /* Set negative margins equal to half the size */
    margin-left​: -50px;
    margin-top: -25px;

    background-color: cornflowerblue;
}

这是一个关于 jsfiddle 的演示：http://jsfiddle.net/UGm2V/

---

如果您确实需要居中的内容具有动态高度，则可以使用更高级的解决方案。请注意，它不适用于旧的 IE 浏览器。 HTML 如下：

<div id="outter-container">
    <div id="inner-container">
        <div id="centred">
            <p>I have a dynamic height!</p>
            <p>Sup!</p>
        </div>        
    </div>
</div>

外部容器需要覆盖页面的宽度和高度。这是一个绝对定位的块元素。
内容器实际上是一张桌子！这是由display: table css 属性决定的。这里的胜利是您实际上不需要任何表格 HTML。
#centred div 是最后一个必需的元素。它仍然覆盖 100% 的页面宽度和高度，但放置在其中的任何内容都将垂直和水平居中。这是您需要的 css，并附有说明：

/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
    display: table;
    width: 100%;
    height: 100%;
}

/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

​当然，这里还有一个 jsfiddle 演示：http://jsfiddle.net/N7ZAr/3/

Answer 2

如果是固定大小的元素，你可以这样做：

#centered {
    position:absolute;
    width:200px;
    height:400px;
    top:50%;
    left:50%;
    margin-left:-100px; // negative-half of element's width
    margin-top:-200px; // negative-half of element's height
}​

这里的诀窍是top:50%; left:50%;。将它与一个margin-left 和一个margin-top 结合起来，等于你的width 和height 的negative-half，你的元素将在你的页面中居中.

如果您不使用 Eric Meyer 的 CSS 重置或 normalize.css 等重置样式表，请务必将您的 body 设置为 margin:0; 以使此技巧起作用。

这是一个 jsfiddle：http://jsfiddle.net/remibreton/fZywe/1/

我做的一个网站的例子：http://althotels.ca/

Answer 3

http://milov.nl/code/css/verticalcenter.html 检查源代码

Answer 4

如果不知道居中内容的大小，则需要两步居中 此处示例：http://jsfiddle.net/G6fUE/

<div class="popup-center">
    <div class="content">
        sadalshd<br />
        sadalshd<br />
        <img src="http://www.lorempixel.com/200/200" />
        sadalshd<br>
    </div>
</div>​

---

.popup-center {
    position: absolute;
    top: 50%;
    left: 50%;
}
.popup-center div {
    margin-left: -50%;
    margin-top: -50%;
}

​

Answer 5

对于左/右居中，您可以为元素指定宽度并将左右边距设置为“自动”。

对于垂直居中，它有点棘手。您可以使用百分比高度，但请记住将主体高度设置为 100%，否则将不起作用。

不知道这在IE7中是否有效，抱歉。