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

【问题标题】：Can I create Background and foreground using Flexbox?我可以使用 Flexbox 创建背景和前景吗？
【发布时间】：2017-08-01 00:20:41
【问题描述】：

我想将一个 div 置于背景中，将另一个 div 置于前景中。雾圆 div 应该根据背景中 div 的大小，或者容器 div 的大小，自动垂直和水平居中。

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

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

    <div class="container" style="position:relative; height:400px; width:100%;">
        <div class="backgorund" style="height:100%; width:100%; background-color:green;">
        <div class ="child" style="position:absolute; left:50%;">
            <div class="foreground" style="position:relative; right:50%">
                <p>I'm centered horizontally, but not vertically</p>
            </div>
        </div>
    </div>

但是我必须在前景 div 中添加 flexbox 以使前景垂直居中。

【问题讨论】：

css-tricks.com/centering-css-complete-guide, css-tricks.com/centering-in-the-unknown
请参阅my post，了解如何使用 flexbox 堆叠和对齐两个或多个元素。

标签： html css flexbox

【解决方案1】：

我不确定我是否正确。但是你只需要display: flex; 来释放魔法，align-items: center; 用于水平方向，justify-content: center; 用于垂直对齐嵌套元素。

html, body {
  height: 100%;
}

.container {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
}

.item {
  padding: 2em;
  color: white;
  background-color: hotpink;
}

<div class="container">
  <div class="item">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Consectetur adipisci velit</p>
  </div>
</div>

【讨论】：

这个例子包括一个只有一个孩子的弹性容器，但我想创建一个有两个孩子的容器，它们相互重叠，所以一个在后台，另一个在前台。跨度>

【解决方案2】：

答案是否。您可以使用 flexbox 并且可以将事物居中 - 您可以将这些事物堆叠在一起，但目前还没有一种特殊的 flexbox 方式可以做到这一点。你必须使用另一个定位。

我经常使用这种技术。 请注意，您需要一个相对定位的父母

@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()

【讨论】：