我终于开始为我的新设计尝试使用flexbox了,因为它最终可以解决这个古老的问题,你如何在屏幕上垂直居中一堆文字...只是为了找到,它并不那么容易和我想象的一样。
如果内容高于容器,则内容的顶部实际上将被隐藏,并且无法通过滚动访问。 Chrome和Firefox的行为相同。我创建了一个Codepen演示,重现了这个问题:http://codepen.io/perrin4869/pen/LGKOwy
该演示包含3种不同的垂直居中内容方法。 transform: translateX(-50%)
和display: flex
方法的行为完全相同,表格方法的工作方式几乎与我预期的方式相同,但实际使用display: table
时存在缺点。
编辑:
问题是,有没有办法让flexbox
的溢出行为像display: table
示例中的溢出一样?
答案 0 :(得分:2)
我找到的解决方案是在.content
.container.flex
内提供max-height: 100%
元素。这解决了剪辑问题并使内容保持居中。
请查看新版本: http://codepen.io/wilman/pen/NxZzqN
您会注意到文本溢出了小版本中的绿色框,但也许您可以将其视为一个单独的,而不是那么困难的问题。 :)
编辑:正如其他来源建议在内容元素中添加margin: auto 0;
也可以解决滚动问题。