垂直居中图像，显示表格单元格不工作

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，但这一切都取决于你想要它的设计方式。