Html flexbox中内容居中的等高列

我想有两个高度相等的列，它们的内容应该是中间对齐的，所以在每个div的中心

问题：“等高”和“中间对齐”似乎将自己排除在外，一个与另一个不起作用

<强>问题：< /强>我如何创建一个具有两个不同宽度、相等高度和它们的内容集中在每个列中间的行？< /p>

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
    <div class="row">
        <div class="twelve wide purple column">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        </div>
        <div class="four wide red column  middle aligned">
            <div class="row">Forward</div>

        </div>
    </div>
</div>

文本文本文本

文本文本文本

文本文本文本

文本文本文本

向前地

---

您需要为元素赋予高度

.height {
  height: 300px;
}
.row {
  height: 100%;
}
.row > div {
  height: 100%;
}

如果希望它们垂直居中，请将上面的

.row>div

规则更新为此

.row > div {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

---

此布局的关键是对主flex容器应用相同的高度

然后将flex项嵌套在flex容器中，这样可以将flex项的内容放在中心位置

因此，顶层创建的高度相等。第二层做定心

（有关更多详细信息，请参见底部的注释。）

下面是一个基于您的代码结构的示例：

正文{
高度：300px；/*用于演示*/
颜色：白色；
}
柔性容器{
显示：flex；/*主flex容器*/
弹性方向：行；/*弹性项目的水平对齐
（默认值；可以省略）*/
对齐项目：拉伸；/*将对弹性项目应用相同的高度
（默认值；可以省略）*/
身高：100%；
}
弹性项目{
显示：flex；/*嵌套flex容器*/
弹性方向：列；/*弹性项目的垂直对齐*/
对齐内容：居中；/*垂直居中弹性项目*/
对齐项目：居中；/*水平居中柔性项目*/
}
弹性项目：第一个孩子{
flex:3；/*占用的可用空间是兄弟姐妹的3倍*/
背景色：#a333c8；
}
弹性项目：最后一个孩子{
弹性：1；
背景色：#db2828；
}

文本文本文本

文本文本文本

文本文本文本

文本文本文本

向前地