如何相对于 flexbox grandparent 垂直居中 div？

Question

给定一个 div 和显示 flexbox .wrapper（运行并查看下面的代码片段）和一个深度嵌套的 div .text-container，我如何居中深度嵌套的 div 相对于 .wrapper 而不是相对于它的 parent .variable-height？

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

我想出的唯一解决办法是在 .wrapper 和 .text-container 上设置 position: relative;:

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

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

.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 及其弹性项目不知道 .text-container 存在。如果容器或物品有任何灵活性，它们将与 .text-container 重叠。请参阅此图：

Centering: Absolute Positioning vs Flexbox（re-size和window看区别）

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

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

规范中需要注意的两点：

尽管从文档流中删除了一个绝对定位的弹性项目（如预期的那样），它仍然识别 order 属性.
您仍然可以使用 flex 属性使绝对定位的 flex 项目居中，但仅在某些情况下并且仅在父容器内，而不是在祖父容器内。

如何相对于 flexbox grandparent 垂直居中 div？

How to vertically center div relative to flexbox grandparent?

html

css

centering

flexbox