html - 如何将一个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;

}

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