如何在页面上垂直居中我的图像答案

【问题标题】：How do I vertically center my images on a page如何在页面上垂直居中我的图像
【发布时间】：2014-06-29 06:33:37
【问题描述】：

如果您在此page 上向下滚动到标题为“我们回收电子产品的资格”的子部分，您将看到代表不同资格的 3 个图形。我想确保它们在它们的列中水平居中并在每个列中垂直居中。我有第一部分，但我正在努力解决第二部分。任何帮助，将不胜感激。

【问题讨论】：

【解决方案1】：

您想要 JS 还是 CSS 解决方案？

CSS：在 #x-content-band-19

display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

Javascript：只取这 3 个 div 的容器高度，得到每个孩子的高度，减去 diff 并除以 2。所以喜欢。

var ph = $('#x-content-band-19').height();
var ih = $('img').height();

$('img').css({top : (ph - ih) / 2 });

【讨论】：

【解决方案2】：

除非我有误解，否则简单的display: flex; 和align-items: center; div#x-content-band-19（图像的父级）就足够了。

【讨论】：

【解决方案3】：

Here 是 CSS 技巧中的一个很好的链接。希望这会有所帮助...

CSS 中的vertical-align 属性控制在一行中彼此相邻的元素如何排列。

img {
  vertical-align: middle;
}

【讨论】：