相关疑难解决方法(0)

我有一个类似灯箱项目的以下HTML.

<div id="lightbox">
  <img id="image" src="" />
</div>

使用以下CSS:

#lightbox{
display:none;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}

#image{
position:relative;
height:600px;
border:1px solid grey;
}

为了使图像始终在水平中心,我只是在包装div上使用text-align:center,所以我100%确定它是正确的.

我遇到了垂直居中的问题,我使用的方法是简单地设置#lightbox属性中的顶部值.

正如您所看到的,图像的高度是已知的,因此在jQuery中很容易实现,但我正在寻找一个纯CSS解决方案.

有任何想法吗？谢谢.