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

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