javascript - 使用 flexbox 将多个 DIV 居中并分层

Question

我想将多个 DIV 层叠在一起，同时使用 flexbox 将它们垂直和水平居中。

在下面的示例中，我希望 .whitebox 和 .bluebox 在容器内垂直和水平居中，彼此重叠。目前 .whitebox 是用绝对位置定位的。这可能吗？

.container {
  height: 16px;
  width: 16px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bluebox {
  height: 16px;
  width: 16px;
  background-color: #0073FF;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

.whitebox {
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="bluebox"></div>
  <div class="whitebox"></div>
</div>

Answer 1

无需定位 top 和 left。仅仅应用绝对定位就足够了，因为这会将元素“弹出”到它们自己的层中，因此它们可以随意放置而不会影响该层中的其他元素。一旦你这样做了，align-items 和 justify-content 就会完成它们的工作。

.container {
  height: 16px;
  width: 16px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bluebox {
  height: 16px;
  width: 16px;
  background-color: #0073FF;
  border-radius: 4px;
  position: absolute;

}

.whitebox {
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 4px;
  position: absolute;

}

.border {
  height: 16px;
  width: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="bluebox"></div>
  <div class="whitebox"></div>
  <div class="border"></div>
</div>