仅使用 css 将容器元素内的图像垂直居中答案

【问题标题】：Vertically center an image insider container element with just css仅使用 css 将容器元素内的图像垂直居中
【发布时间】：2012-10-04 10:16:27
【问题描述】：

我需要使用 CSS 在他们的容器 <li> 块中垂直居中一些图像，但我不知道该怎么做。我可以求助于使用 javascript 来计算图像的高度，然后使用边距进行一些数学运算以使其垂直居中，但这看起来既笨重又愚蠢。

有没有好的基于 CSS 的解决方案来完成垂直对齐而不使用固定边距（图像高度是可变的）？

贴在容器 li 元素顶部的图像：

【问题讨论】：

【解决方案1】：

你可以使用这个css属性：

display: table-cell; vertical-align: middle;

【讨论】：

【解决方案2】：

这可能会解决您的问题：

vertical-align: middle;

【讨论】：

【解决方案3】：

这是我一直在使用的..
vertical-align: middle;

【讨论】：

【解决方案4】：

Fredy 的回答对于现代浏览器是正确的，但不适用于 IE pre 8。其他技术：http://phrogz.net/css/vertical-align/index.html

【讨论】：

【解决方案5】：

【讨论】：