如何在 IE7 和 IE6 中垂直居中元素？

Question

我有一个没有固定高度的 div 元素，我想让它在其父元素内垂直居中而不管它的高度。我在现代浏览器中使用display: table-cell 技术，但似乎这种技术在 IE7 及更低版本中不起作用。有没有办法在IE7及以下使用纯CSS实现这种垂直居中的效果？提前致谢。

Answer 1

您可以将容器的height 值设置为其line-height 属性，并将display:inline-block 设置为居中元素。

HTML：

<div id="container">
    <span>content</span>
</div>

CSS：

#container {
    display: table-cell; vertical-align:middle;
    border:1px solid red;
    height:300px;
    background-color:green;
    width:400px;
    text-align:center;
    line-height:300px; /* Same as height */
}
#container>span{
    background-color:lightblue;
    height:50px;
    width:100px;
    line-height:normal;
    display:inline-block; 
    vertical-align:middle;
}

在这里查看：http://jsfiddle.net/9TE5t/4/

但请注意，在 IE 7 及更早版本中，如果您将 display:inline-block 设置为默认块元素（例如 <div>），其行为将类似于 display:block。

然后，您可以使用默认的内联元素（例如<span>），或者如果浏览器是IE7 或更早版本，则可以使用IE 条件cmets 并设置display:inline（它们的行为类似于display:inline-block）。