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

Question

我想定位一个div在背景，另一个div在前景。Fog圆形div应根据背景中div的大小或容器div的大小自动地垂直和水平地居中。

我想知道是否有一种使用Flexbox的优雅方法。有时，在我开始排列柔性盒元素之前，我会看到不同的孩子重叠。到目前为止，我没有重复这一点。其优点是，如果我们可以让元素重叠使用柔性盒，我们可以在垂直和水平的前景很容易地使用边距: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中添加柔性盒，使前景垂直地居中。

​

Answer 1

答案是no。您可以使用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()

Answer 2

我不确定我对不对。但是，您只需要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>

​