CSS:将两个元素居中

Question

我该怎么做:

1. 一张图片
2. 图像顶部的一个简单的小 DIV，垂直/水平居中，在图像滚动之前不会出现

Answer 1

试试这个:

<div style="position:relative;top:0;left:0;">
    <img src="path/2/img.png" style="z-index:1;"
         onmouseover="document.getElementById('hidden').style.display='block';">
    <div id="hidden" style="display:none;position:absolute;z-index:10;"></div>
</div>

如果它适合您，请在部署前清理它! :)

注意: div#hidden 尚未在图像上居中。如果事先知道它的宽高，可以用这个方法:

#hidden {
    top:50%;
    left:50%;
    margin-top: -(heightOfHiddenDiv/2)px
    margin-left: -(widthOfHiddenDiv/2)px
}

否则，您将需要在 JavaScript 中获取宽度和高度的计算值。