html - 如何相对于 flexbox 祖 parent 垂直居中 div？

Question

给定一个带有显示 flexbox .wrapper 的 div(运行并查看下面的代码片段)和一个深度嵌套的 div .text-container，我如何才能将深度嵌套的 div 居中相对于 .wrapper 而不是相对于其父级 .variable-height？

在下面的代码片段中，有两列高度相同，我希望文本位于每列内可变高度的 div 中，处于同一水平。我已经将可变高度 div 的显示也设置为 flexbox，因此从逻辑上讲文本是居中的，相对于它而不是祖父 .wrapper，这不是什么我要。

我想到的唯一解决方案是在 .wrapper 和 .text-container 上设置 position: relative;:

position: absolute;
top: 50%;
transform: translateY(-50%);

但是，我不确定混合使用 flexbox 和绝对/相对定位是否是个好主意。

.wrapper {
  background-color: white;
  min-height: 200px;
  width: 200px;
  float: left;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}

.wrapper .fixed-height {
  background-color: orange;
  min-height: 30px;
}

.wrapper .second {
  background-color: yellow;
  min-height: 30px;
}

.wrapper .variable-height {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper .variable-height .text-container {
  width: 100%;
  text-align: center;
}

<div class="wrapper">
  <div class="fixed-height"></div>
  <div class="fixed-height second"></div>
  <div class="variable-height">
    <div class="text-container">
      <div class="title">Title</div>
      <div class="subtitle">Subtitle</div>
    </div>
  </div>
  <div class="fixed-height"></div>
</div>

<div class="wrapper">
  <div class="fixed-height"></div>
  <div class="variable-height">
    <div class="text-container">
      <div class="title">Title</div>
      <div class="subtitle">Subtitle</div>
    </div>
  </div>
  <div class="fixed-height"></div>
</div>

Answer 1

However, I am not sure, if it's a good idea to mix flexbox and absolute/relative positioning.

嗯，这取决于你能接受什么样的行为。

当您绝对定位一个元素时，您将其从文档流中移除。

因此，在这种情况下，.wrapper 及其 flex 元素不知道 .text-container 的存在。如果容器或元素有任何灵 active ，它们将与 .text-container 重叠。请参阅此图:

Centering: Absolute Positioning vs Flexbox (重新调整窗口大小以查看差异)

同样，如果您可以接受重叠，那么绝对定位就可以了。

---

就 flexbox 规范而言，将绝对/相对定位与 flex 属性混合并没有错。规范中有一节是关于这个主题的:

4.1. Absolutely-Positioned Flex Children

An absolutely-positioned child of a flex container does not participate in flex layout. However, it does participate in the reordering step (see order), which has an effect in their painting order.

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size.

The effect of this is that if you set, for example, align-content: center; on an absolutely-positioned child of a flex container, the child’s static position will center it in the flex container’s cross axis.

规范中需要注意的两点:

• 虽然绝对定位的 flex 元素从文档流中移除(如预期的那样)，但它仍然识别 order 属性。

• 您仍然可以使用 flex 属性使绝对定位的 flex 元素居中，但仅限于某些情况下并且仅在父容器内，而不是在祖父容器内。