如何在位置固定的 div 中垂直居中图像？ [复制]

Question

我查看了很多不同的垂直居中技术，但没有一个对我有用 - 主要是因为我使用的是固定定位的 div。

<div id="lightbox">
<div id="lightboxImgContainer">
<img src="' + image_href + '" />
</div>
</div>

#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
text-align:center;
z-index:4;
display:none;   
}

#lightboxImgContainer
{
display:table-cell;
vertical-align:middle;
max-height:100%;
max-width:100%;
text-align:center;
}  

#lightbox img {
max-height: 100%;
max-width: 100%;
}

另外，我是唯一一个认为垂直对齐不像水平对齐那么简单的笑话的人吗？我花了太多时间来完成本应简单的任务。

Answer 1

最简单的方法是设置为背景图片：

#lightbox {
  background:url(myimage.jpg) no-repeat center center
}

或者，如果你 don't need to support IE <= 9，你可以使用 flexbox

#lightbox {
  display: flex;
}
#lightbox img {
  align-items:  center;
}