如何将一个 div 居中放置在另一个 div 中

Question

假设我有两个嵌套的 div。类似于以下内容：-

<div id="div1">Some name here
  <div id="div2">DIV2</div>
</div>

假设div1的高度和宽度是100px。并且div2的高宽都是50px。我如何使它们看起来同心，即 div2 必须位于 div1 内，从四面八方等距（使用 CSS）。

Answer 1

如果两个 div 的尺寸固定，您可以简单地在第二个 div 上放置一个边距。在你的情况下：

#div2 {
 margin: 25px;
}

或者，如果 div 有可变尺寸，请尝试：

#div1 {
 position: relative;
}
#div2 {
position:absolute;
left:50%;
top:50%;

transform: translate(-50%,-50%);

}

或者 ：

#div1 {
text-align: center;

}
#div2 {
display: inline-block;
vertical-align: middle;

}

这就是我所知道的实现这一目标的所有方式:)