Css 为什么'；在Safari中，当父元素'；什么是弹性物品？

我使用的方法是使子元素100%等于其父元素的高度，这在StackOverflow答案中最常见，即相对定位父元素，然后给子元素以下样式：

position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;

但是，请看一看。在其中，我将父元素设置为弹性项，将子元素设置为表（或带有

display:table

的

）。我需要为我的客户的真实世界设计案例，部分是垂直对齐中间的文字，我相信只有表格能做到。

正如你所看到的，它在狩猎中中断。但是看起来CSS应该可以工作，在Chrome中也可以。为什么要闯入狩猎？我怎样才能解决这个问题

---

注：如果有必要，我愿意采用其他方法使孩子的身高达到其弹性体项目父项的100%。

如果让父项显示：弹性体；弯曲方向：立柱；儿童的成长：1；它应该会起作用

<div class="parent">
  <div class="child">
      Content
  </div>
</div>

---

检查这个

这是我已经在：

#flex_outer_container{display:flex；flex direction:column；}.flex_项{flex grow:1；}

。你试过编辑CODEPTN吗？如果是这样的话，编辑是怎么工作的？”Top22你应该删除表，在我的答案中检查代码笔，谢谢，但是我的问题的要点是我需要有一个表（或者<代码>显示：表< /代码>元素）来在中间垂直对齐文本。对不起，我的问题不够清楚，已编辑。你能看到我的特定代码笔出了什么问题吗？你不需要表格来垂直对齐文本。只需使用flex容器。我更新了我的代码笔。哦，太好了，我不知道flexbox的

align items

功能！非常感谢你的帮助，衷心感谢加布里埃尔

.parent{
  display:flex;
  flex-direction: column;
  background:blue;
  height: 300px;
}

.child{
  flex-grow:1;
  background:red;
  display:flex;
  align-items:center;
}