<分区>
<分区>
我研究了很多不同的垂直居中技术，但没有一个对我有用——主要是因为我使用的是固定定位的 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%;
}
另外，我是唯一一个认为垂直对齐不像水平对齐那么简单的笑话的人吗？我在这上面花了太多时间来完成本应是一项简单的任务。
最佳答案
最简单的方法是将其设置为背景图片:
#lightbox {
background:url(myimage.jpg) no-repeat center center
}
或者，您可以使用 flexbox，如果您 don't need to support IE <= 9
#lightbox {
display: flex;
}
#lightbox img {
align-items: center;
}
关于html - 如何在位置为 :fixed? 的 div 中垂直居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23256832/