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

debugcn 发表于 Dev

本·卡普

我想在背景中放置一个 div，在前景中放置另一个 div。foground 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 以垂直居中前景。

治安官德里克

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。