Html 我可以使用Flexbox创建背景和前景吗？

我想在背景中放置一个div，在前景中放置另一个div。foground div应根据背景中div的大小或容器div的大小自动垂直和水平居中

我想知道是否有一个优雅的方式来做它使用Flexbox。有时，在开始排列flexbox元素之前，我会看到不同的子元素重叠。到目前为止，我没有复制这一点。优点是，如果我们可以使用flexbox使元素重叠，我们可以使用margin:auto；轻松地将前景垂直和水平居中

另一种方法是使用相对位置和绝对位置。例如：

我水平居中，但不是垂直居中

我不确定你说的对不对。但您只需要

display:flex用于释放魔法，
对齐项目：居中用于水平方向，而
对齐内容：居中用于垂直对齐嵌套图元


html，正文{
身高：100%；
}
.集装箱{
身高：100%；
保证金：0；
填充：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景颜色：粉红色；
}
.项目{
填料：2米；
颜色：白色；
背景色：热粉红色；
}

Lorem ipsum dolor sit amet

阿迪皮西·维利特圣殿酒店

答案是否。你可以使用flexbox，你可以把东西放在中心，你可以把这些东西叠在一起，但是目前还没有一种特殊的flexbox方法。你必须使用另一种定位

我经常使用这种技巧。请注意，您需要相对定位的父级

或

，请参见如何使用flexbox堆叠和对齐两个或多个元素。该示例包括一个只有一个子元素的flex容器，但我希望创建一个有两个子元素的容器，它们彼此重叠，因此一个位于背景中，另一个位于前景中。
@mixin absolute-translate-center() {
  float: none; /* just in case */
  position: absolute;
  margin-left: 50%;
  margin-right: 50%;
  transform: translate(-50%, -50%);
}

.thing {
  @include absolute-translate-center();
}

absolute-translate-center()
  float: none
  position: absolute;
  margin-left: 50%
  margin-right: 50%
  transform: translate(-50%, -50%)

.thing
  absolute-translate-center()