如何使用sass (compass)实现垂直居中div？

Question

如何使用sass (compass)实现垂直居中div？

csssassvertical-alignmentmixinscompass-sass

4

好的，一切都在问题中... 我正在制作一个登录表单，希望将其垂直对齐到页面中央。我对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，我在想是否可以考虑一些好的方法...

- Yako

请分享您的标记或提供至少一个在Fiddle中有效的简短示例。登录表单是否具有固定宽度/高度？需要支持哪个浏览器和版本？ - Fabrizio Calderan

可能是如何使用CSS将文本垂直居中对齐在div中？的重复问题。 - cimmanon

并不是每个CSS技巧都有在Compass中编写的mixin。如果你不知道需要哪些CSS来完成工作，那么你怎么可能要求Sass或Compass去做呢？ - cimmanon

这绝对不是所提供的线程的副本 ;) - Yako

3个回答

2

我终于找到了解决方案。

应该在html标记中添加一个特定的类。

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;
    }
}

如果您使用compass：

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

- Yako

1

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

链接：

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

- Dimi Mikadze

这并没有为现有的答案增加任何内容（请参见：https://dev59.com/XH7aa4cB1Zd3GeqPxf1g#23267046）。 - cimmanon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Osborne · Accepted Answer

我使用这个Mixin来居中内容。它使用了变换，所以不是所有版本的IE都支持。

MIXIN：

@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