Flexbox垂直对齐溢出

时间:2016-02-22 05:09:16

标签: css flexbox

我终于开始为我的新设计尝试使用flexbox了,因为它最终可以解决这个古老的问题,你如何在屏幕上垂直居中一堆文字...只是为了找到,它并不那么容易和我想象的一样。

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

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

编辑: 问题是,有没有办法让flexbox的溢出行为像display: table示例中的溢出一样?

1 个答案:

答案 0 :(得分:2)

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

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

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

编辑:正如其他来源建议在内容元素中添加margin: auto 0;也可以解决滚动问题。