Html 如何使用flex将div高度100%设置为其容器，并保持垂直对齐的居中？

我尝试使用flexbox将文本和按钮居中，并使列保持相等。但我很难将柱高度设置为容器的100%。当我将高度设置为100%时，它的垂直对齐不再位于中间。我不希望使用table或javascript实现结果

.container{
显示器：flex；
边框顶部：实心1px；
边框底部：实心1px；
对齐项目：居中；
高度：48px；
}
.栏目{
弹性基准：100%；
文本对齐：居中；
}
中山村{
左边框：实心1px；
右边框：实心1px；
}

50
下列的
50
追随者
跟随

您可以在不使用表格的情况下实现这一点，只需使用父级的

显示：表格

，以及

显示：表格单元格；垂直对齐：中间对齐到子级。如果您希望使用flex本身实现这一点，我已经在下面的示例中实现了这一点



.集装箱{
边框顶部：实心1px；
边框底部：实心1px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：300px；
}
.栏目{
文本对齐：居中；
宽度：33%；
}
.列--顶部{
自我校准：灵活启动；
}
.column--底部{
自对准：柔性端；
}
中山村{
左边框：实心1px；
右边框：实心1px；
}
50
下列的
50
追随者
跟随
如果希望
列
s获得容器的100%高度，则必须使用嵌套的flexbox

-添加以下内容：

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

到

列

并从

容器

中删除

对齐项目：居中

（以便默认的

对齐项目：拉伸

可能生效）

（您现在无法为

列设置100%高度，因为已将
对齐项目：居中
应用于您的
容器
）

请参见下面的演示：


.container{
显示器：flex；
边框顶部：实心1px；
边框底部：实心1px；
高度：48px；
}
.栏目{
弹性基准：100%；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
中山村{
左边框：实心1px；
右边框：实心1px；
}

50
下列的
50
追随者
跟随
我希望中间的边框达到最大高度。当我设置.column{height:100%}时，对齐项不再居中。它移到顶部。看看这里：-如果我理解正确，这可能就是问题所在。。。。。所以你应该这样做：是的，Danield！这就是我要找的。我以前试过使用align self，但不起作用，直到我看到您的代码带有“flex direction”，非常感谢！嗨，谢谢你Nitheesh，谢谢你的工作代码。但我想通过使用flex挖掘更多信息。我听说flex的性能很好。我已经更新了代码。请检查它是否符合您的要求。您好Nitheesh，我个人喜欢您的第一个代码（编辑前），其中等分使用flex而不是33%，谢谢againHi Kukuz，谢谢您的解释！我接受你的回答作为我最后的回答，干杯！