网格垂直对齐图像（CSS）

Question

我一直在搞这个一阵子，我的客户坚持要通过CSS手动设置图像的位置并不是一个可以接受的解决方案。基本上我试图垂直居中父DIV（它有一个静态高度）的图像。

我正在考虑通过PHP计算图像大小，然后为每个图像设置CSS规则，但想象这会让它复杂化。

有人请看看demo here并提供可能的解决方案吗？

谢谢！

Answer 1

你并不需要在这里计算的东西，CSS拥有一切的解决方案，关键是要使用display: table-cell;与vertical-align: middle;

CSS

div { 
    display: table-cell; 
    height: 300px; 
    border: 1px solid green; 
    display: table-cell; 
    vertical-align: middle; 
} 

Demo

Answer 2

这是一个情况下， <table>元素。这可以说是表格数据。

当你这样做，你可以给表格单元格vertical-align：

table td { vertical-align: middle; }