javascript - 如何将一个 div 置于另一个 div 中？

Question

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

无论如何，无论 div2 宽度变化多少，我都希望 div 2 位于 div1 的中心。 Atm div2 仅以容器宽度为中心。我怎样才能做到这一点？ JS 是最后的出路吗？

Answer 1

CSS flexbox 使用 justify-content 和 align-items 属性来做到这一点。

将一个名为bullseye 的类命名为:

.bullseye {
   display: flex;
   justify-content: center;
   align-items: center;
   }

然后将该类添加到您的 div1 元素中:

<div id=container>
   <div id=div1 class=bullseye>
      <div id=div2>
         This box is centered<br>
         horizontally and vertically.
      </div>
   </div>
</div>

摆弄它:
https://jsfiddle.net/1rd6tcra/

文档:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes