我有显示图像的功能。它打开隐藏的div,包含图像和带黑色叠加的div。
.black-overlay {
opacity: 0.8;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.white-content {
z-index: 11;
top: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
height: 100%;
padding-top: 5%;
}
.white-content .main-image {
z-index: 11;
border: 2px solid #ccc;
border-radius: 10px;
background: #FFF;
max-width: 90%;
max-height: 90%;
position: relative;
}

<div class="black-overlay hide"></div>
<div class="white-content hide">
<img class="main-image" src="//dummyimage.com/200" />
</div>
&#13;
水平图像在中心对齐,这就是我想要的。
问题是,垂直图像始终贴在顶部,我无法弄清楚如何修复它。
有人可以帮助我解决它(如果需要,我可以添加额外的div)
答案 0 :(得分:0)
使用display:flex进行居中:
.white-content{
display: flex;
justify-content: center;
align-items: center;
}
.white-content .main-image{
display: block;
}
这将使图像水平和垂直居中。请记住为旧浏览器添加前缀。