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;
}

如何在位置：固定的div中垂直居中图像？

1 个答案: