将图像叠加在顶部的div对中

Question

我有一个容器div，上面覆盖了一个图像。

我想把这个容器div集中在一个基本的popin中。我确信这与我在CSS中使用的覆盖方法有关，但我无法理解。如何将容器开发放在popin中的中心？

编辑:有几个这样的块放置在线上。

CSS和HTML如下：

​

.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; left: 0; }

.popin{
  background:#fff;
  padding:15px;
  box-shadow: 0 0 20px #999;
  border-radius:2px;
}

#underlay1 {
  width: 320px;
  height: 320px;
  position: relative;
}

#underlay2 {
  width: 320px;
  height: 320px;
  position: relative;
}

<div class="row">
  <div class="col-md-4 col-sm-6 popin">
    <div class="containerdiv">
      <div id="underlay1"></div>
      <img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">		
    </div>
  </div>

  <div class="col-md-4 col-sm-6 popin">
    <div class="containerdiv">
      <div id="underlay2"></div>
      <img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">		
    </div>
  </div>
</div>

​

底座正在接收来自API的图像。overlayimage.gif是另一个被放置在顶部的图像。

Answer 1

只需将float: left;从.containerdiv中删除，并将text-align: center;交给.popin即可解决您的问题。

您可以用以下方式对绝对div进行居中：

left: 50%; 
transform: translate(-50%, 0px);

http://jsfiddle.net/5z2k1b1r/

编辑：

按照预期的输出对margin: 0 auto;进行#underlay。

检查小提琴