Flexbox垂直对齐溢出[重复]

Posted 2023-03-05

【中文标题】Flexbox垂直对齐溢出[重复]

【英文标题】：Flexbox vertical align overflow [duplicate]

【发布时间】：2016-06-03 10:32:47

【问题描述】：

我终于开始为我的新设计尝试 flexbox，因为它终于可以解决这个古老的问题，你如何在屏幕上垂直居中一堆文本......只是发现，这并不容易和我想的一样。

如果内容高于容器，则内容的顶部实际上将被隐藏并且无法通过滚动访问。 Chrome 和 Firefox 的行为相同。我创建了一个 Codepen 演示来重现该问题：http://codepen.io/perrin4869/pen/LGKOwy

该演示包含 3 种不同的垂直居中内容方法。 transform: translateX(-50%) 和 display: flex 方法的行为完全相同，table 方法的工作方式几乎与我预期的一样，但缺点来自实际使用 display: table。

编辑： 问题是，有没有办法让flexbox 的溢出行为类似于display: table 示例中的溢出？

【问题讨论】：

请解释否决票以帮助改善问题，我认为发布者在构建这个问题上付出了很多努力

【参考方案1】：

我找到的解决方案是在.container.flex 中给.content 元素一个max-height: 100%。这解决了剪辑问题并保持内容居中。

请看新版本：http://codepen.io/wilman/pen/NxZzqN

您会注意到小版本中的文本溢出了绿色框，但也许您可以将其视为一个单独的，不是那么困难的问题。 :)

编辑：正如其他消息来源所建议的那样，将 margin: auto 0; 添加到内容元素也可以解决滚动问题。

【讨论】：

很棒的解决方案！如果您能解释为什么这也有效，则可以加分：P

max-height: 100% 限制内容元素不大于其父元素，同时让文本溢出，从而生成滚动。另请参阅我的答案中的更新以获取另一种方法。干杯！