我有一个类别的LightBox项目的以下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，所以我确信它是正确的。
我正面临垂直居中的问题，我正在使用一个解决方法，只需在#lightBox属性中设置顶级值。
正如你可以看到图像的高度是已知的，所以它很容易在jQuery中可行，但我正在寻找一个纯CSS的解决方案。
有任何想法吗？谢谢。
解决方法
或者，您可以尝试这个(仅在您知道图像的高度时有效)：
#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}
