将一个 div 放在另一个 div 的中心答案

【问题标题】：Place a div in the center of another div将一个 div 放在另一个 div 的中心
【发布时间】：2015-07-14 11:03:55
【问题描述】：

我需要将一个矩形 div 放在另一个矩形 div 的中间，该矩形 div 在另一个容器 div 内。最内层div 内的图像必须相对于最外层div 在水平和垂直方向上居中。我该怎么做？

<div class="col-sm-4 col-sm-offset-1" style="margin-right:10px;">
  <div class="panel panel-default" style="min-height:320px;">
    <div class="panel-body" style="padding:0;">             
       <img src="">
    </div>
   <div>
</div>

【问题讨论】：

您可以根据需要添加更多的 div，但类似的东西？ jsbin.com/qocude/2/edit?html,css,output
我应该提到最外面的 div 是两个现有列之一，所以我不能乱用它的 display 属性，因为它会干扰另一列。 col-sm-4 col-sm-offset-1 是 Bootstrap 框架的一部分，所以我坚持保持原样。

标签： html css alignment centering

【解决方案1】：

#div1{
  border:1px solid;
  width:200px;
  height:200px;
}

#div2{
  border:1px solid;
  width:100px;
  height:100px;
  margin:25%;
}

#div3{
  border:1px solid;
  width:50px;
  height:50px;
  margin:25%;
}

<div id="div1">
  <div id="div2">
      <div id="div3"></div>

  </div>
</div>

确保所有 div 都设置了宽度和高度，然后使用：

margin: 25%;

在内部 div 上

【讨论】：

那只会设置水平居中。我需要图像水平和垂直居中。
嗨，山姆。如果您将code 与CSS 一起查看，可能会更容易？请注意，IMG 元素实际上是由 javascript 动态生成的，因此只指定了最小尺寸。