如何使用 sass（指南针）垂直居中 div？答案

【问题标题】：How to vertically center a div with sass (compass)?如何使用 sass（指南针）垂直居中 div？
【发布时间】：2014-06-08 00:56:29
【问题描述】：

好吧，一切都在问题之中...... 我正在处理一个登录表单，我想在正文的中心垂直对齐。我是 sass 和 compass 的新手，我很难为此使用正确的 mixin...

html代码很简单：

<body>
   <div>
       A div of unknown height to be vertically centered.
   </div>
</body>

这是使它工作的 CSS3 代码：

 <style>
    html{
      height:100%;
    }
    body{
      height:100%;
      display:flex; 
      align-items:center;
      /* I spared all the compatibility properties for the different browsers */
    }
</style>

___编辑：

我想出了这样的事情，但我意识到我误解了将父选择器与 SASS 一起使用的方式：

div.ieVerticalCentered {
    body.verticalCentering & {
        height:100%;    
        display:-ms-flexbox;
        display:-moz-box;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;       
        -ms-align-items:center;
        -moz-align-items:center;
        -webkit-align-items:center;
        align-items:center;
            html.verticalCentering & {
            height:100%;
        }
    }
}

因此，核心问题是：当子元素具有特定的类时，是否可以将特定样式应用于父元素。

据我所知，使用静态 CSS 是不可能的，但可以使用 JS 来完成。刚刚发现 Sass，我想知道是否可以考虑一些好的东西......

【问题讨论】：

请分享您的标记或提供至少一个简短的有效示例。登录表单是否有固定的宽度/高度？您需要支持什么浏览器和版本？
How to align text vertically center in div with css?的可能重复
并非每个 CSS 技巧都有在 Compass 中为其编写的 mixin。如果你不知道完成工作需要什么 CSS，你怎么可能让 Sass 或 Compass 来做呢？
这绝对不是提供的线程的重复；）

标签： css sass vertical-alignment mixins compass-sass

【解决方案1】：

我使用这个 mixin 来使内容居中。它使用转换，因此并非所有版本的 IE 都受支持。

混音：

@mixin centre($axis: "both"){
    position:absolute;
    @if $axis == "y"{
        top:50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    @if $axis == "x"{
        left:50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    @if $axis == "both"{
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }   
}

用法：

Y axis : @include centre(y);
X axis : @include centre(x);
Both axis : @include centre;

工作示例：Fiddle

【讨论】：

非常感谢。这比我的解决方案好得多！
设置position:relative 似乎更有用，否则您的元素将跳转到任何父元素的顶部或左侧（取决于选择X轴还是Y轴）位置设置为绝对或相对

【解决方案2】：

我终于找到了解决办法。

应将特定类添加到htmltag。

html.verticalCenter { // Center vertically body's block-children
    height: 100%;
    & body {
        height:100%;    
        display:-ms-flexbox;
        display:-moz-box;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;       
        -ms-align-items:center;
        -moz-align-items:center;
        -webkit-align-items:center;
        align-items:center;
    }
}

或者，如果你有指南针：

html.verticalCenter { // Center vertically body's block-children
    height: 100%;
    & body {
        height:100%;    
        @include display-box;           
        @include box-align(center);
    }
}

【讨论】：

【解决方案3】：

vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

链接：

https://github.com/DimitriMikadze/sass-useful-mixins

【讨论】：

这对现有答案没有任何影响（请参阅：stackoverflow.com/a/23267046/1652962）。