css - 如何在 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.

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