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

你可以删除下面的偏移量，它会让你的小盒子以你在其他一切上设置的现有规则为中心。

.whitebox {
  ...
  /* top: 0; */
  /* left: 0; */
}

修改：以上内容适用于Chrome，但似乎无法在Firefox中使用。

实际上，我会简化整个代码，如下所示。它应该适用于支持flexbox的所有地方。

.bluebox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  background-color: #0073FF;
  border-radius: 4px;
}

.whitebox {
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 4px;
}

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

Answer 2

无需定位top和left。只需应用绝对定位就足够了，因为它会弹出＆＃34; pops＆＃34;将元素放入自己的图层中，这样它们可以随意放置而不会影响该图层中的其他元素。完成后，align-items和justify-content将完成他们的工作。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

将你的div设置为：

 <div class="parent">
   <div class="wrapper">
     <div class="whitebox"></div>
     <div class="bluebox"></div>
   </div>
</div>

然后应用此css：

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

 .wrapper{
    position:relative
 }
 .whitebox, .bluebox{
    position:absolute;
    top:0;
    left:0;
 }

Answer 4

我宁愿使用通常的方法进行居中：容器获取position: relative并定义宽度和高度，容器内的元素将获得此CSS：

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

他们在彼此之上的顺序加z-index个值，可能opacity所以可以同时看到它们...

所以在你的例子中，那将是

＆＃13;

.container {
  height: 16px;
  width: 16px;
  background-color: white;
  border-radius: 4px;
  position: relative;
}

.bluebox {
  height: 16px;
  width: 16px;
  background-color: #0073FF;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.whitebox {
  height: 8px;
  width: 8px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

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

＆＃13;

当你这样做时，flexbox属性是多余的。

Answer 5

您可以使用margin-left和margin-top，因为您知道元素的高度和宽度。

<强>解释

从最高50%和左50%移动您的元素。
从右侧移动元素4px，从底部移动4px。

.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;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  margin-top: -4px
}

.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>

使用flexbox对多个DIV进行居中和分层

5 个答案: