Question

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

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

另一种方法是使用position relative和absolute。例如：

＆＃13;

    <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>

＆＃13;

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

Answer 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>

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

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

2 个答案: