css - 显示表格单元格的垂直居中图像不起作用

Question

我正在尝试使用 CSS 显示表格单元将图像垂直居中。为什么我的代码不起作用？看起来应该根据 css-tricks.css

http://css-tricks.com/centering-in-the-unknown/

http://jsfiddle.net/sNE4y/1/

.cont {
    background-color: grey;
    position: fixed;
    height: 100%;
    width: 100%;
    display: table;
}
img {
       display: table-cell;
    vertical-align: middle;
}
<div class="cont">
    <img src="http://www.quarktet.com/Icon-small.jpg" />
</div>

Answer 1

img 标签不需要display: table-cell;，vertical-align: middle;它的父标签需要。

所以你需要：

.cont {
    background-color: grey;
    position: fixed;
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
img {

}
<div class="cont">
    <img src="http://www.quarktet.com/Icon-small.jpg" />
</div>

此外，似乎也出现了position: fixed这个问题，我不得不删除它才能让它在这里工作：http: //jsfiddle.net/sNE4y/6/

如果您仍然需要position: fixed;（我假设您这样做），那么也许您需要另一个父 div，但这完全取决于您希望它如何设计。