与Sass、Susy和指南针垂直对齐

非常感谢您的帮助。我正在使用Sass、Compass和Susy重新设计我的网站。我需要弄清楚如何在浏览器中设置垂直中心。我有一行有五列，我需要垂直居中

以下是HTML：

<div class="layout">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

---

这些部分创建列的行。我需要垂直居中.layout类。

对于任何类似的问题，请从解决CSS中的垂直居中开始。我所知道的两个最好的方法只在现代浏览器中有效。最好的选择是使用

位置

和

变换

。如果您搜索“css垂直中心”，还有其他解决方案

---

这两种方法都需要前缀才能跨浏览器工作，Compass可能会在这方面有所帮助。Compass具有混合功能，可帮助处理flexbox和变换

我在网上见过几个position/transformCSS技巧，但它们要求元素具有高度。我的.layout元素没有设置的高度，因此它的转换不正确。我链接的技巧不需要设置高度（但站点已关闭？）。使用

位置：绝对；最高：50%；转化：translateY（-50%）-顶部定位相对于容器，变换相对于要居中的元素，因此它们结合在一起可以为您提供完美的中心。您可以使用transform（更好的浏览器支持）或flexbox垂直居中元素；有关一些示例，请参见。请发布一个更具描述性的场景示例。