css - img 垂直对齐在颜色框内不起作用

Question

我在父级中使用了 line-height 属性，在子级中使用了 vertical-align:

<div style="height:500px; line-height:500px">
  <img src="someimage.jpg" style="vertical-align:middle" />
</div>

它在 body 标签内有效，但是当我尝试将该内容放入颜色框内时，图像会对齐到顶部，在绝对定位元素、 float 元素或其他元素中是否对这条规则有一些限制？？？

如果有人知道更好的垂直居中图像的方法(而不是 top:50%)，我将不胜感激

谢谢

Answer 1

您可以使用 display: table-cell 但您必须以这种方式放置另一个包裹图像的 div:

<div style="display: table-row; height: 500px;">
 <div style="display: table-cell; vertical-align: middle;">
  <img src="someimage.jpg"/>
 </div>
</div>