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

Question

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

Answer 1

你可以设置容器的height对其 line-height 的值(value)属性(property)，和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对于默认 block 元素(例如 <div> )，它的行为类似于 display:block .

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