图像和 div 完全居中

Question

正如你在这里看到的 http://dekkro.no-ip.org/

我有两个 div，一个在另一个之上。我希望他们 100% 处于正中心。与顶部 div 一起，在调整页面大小时保持在中心位置。它们以我为中心，但对很多人来说却并非如此。

我尝试过使用边距和百分比，但仍然不完美。有解决办法吗？

我目前正在使用

position:absolute; left:32%; top:24%;margin: auto;z-index:-1;

谢谢！

Answer 1

如果 div 的宽度和高度是固定的，您可以使用负边距将其居中。

例如，如果你有一个 300x200 的 div，你可以这样居中：

div {
  position: absolute;
  width: 300px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

Answer 2

只是在 Firebug 上快速搞乱：

<div class="my_img" 
     style="position: absolute; top:50%; width: 100%;">
    <img width="690" 
         height="425" 
         style=" margin: auto;z-index:-1; margin-top: -212px;"  
         src="http://dekkro.no-ip.org/images/testimage.png">
</div>
<div id="container" 
     style="position : absolute; 
                 top : 0; 
               width : 100%; 
         margin-left : auto; 
        margin-right : auto; 
              height : 600px; 
             z-index : 5;">

如果您需要它在滚动时保持居中，请制作第一行：

<div class="my_img" 
     style="position: fixed; top:50%; width: 100%;">

Answer 3

回到那天，我做了如下描述： http://www.wpdfd.com/ editorial/thebox/deadcentre4.html

也许现在有更好更现代的方法，否则你可以使用它......