关于居中(二)

既然之前挖了坑给自己写了个一,那现在也只好装个逼来个而,关于原理前一篇文基本都有分析,这里只是针对如何使用sass从而优雅的让元素进行居中。

首先,最理想的想法,就无论块级还是内联元素还是什么奇怪的东西,我一句话让他居中他就得乖乖居中。然而对于新手大多数情况是这样:

1. 事前分析

关于居中集中具体做法和情况上一篇文章已有分析,这里再次做一下总结:

  • 内联元素:让其块级父元素使用text-center使其字水平居中,单行使用line-height或者相同的padding-top,padding-bottom让其垂直居中,多行可使用vertival-align或者felx布局或者幽灵元素占位这里不具体分析.
  • 块级元素:知道高度使用负margin,不知道高度或宽度使用transform

(关于块级元素和内联元素,可参考

2. 好了废话不多说,开始封印。

通常一个元素想要居中,都是针对于父元素的居中,因此我们这里将父元素定为.parent

  • 先来正常的方法,块级元素:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    @mixin blockCenter($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;

    /* 没有定义宽度和高度,使用translate的方法 */
    @if not $width and not $height {
    transform: translate(-50%, -50%);
    }

    /* 定义了宽度和高度,使用负margin的方法 */
    @else if $width and $height {
    width: $width;
    height: $height;
    margin-left: -($width / 2);
    margin-top: -($height / 2);
    }

    /* 没有定义高度只定义了宽度 */
    @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
    }

    /* 没有定义宽度只定义了高度 */
    @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
    }
    }
  • 接着换武器,我们开启黑科技flex,这不仅让你不用在意内联还是块级,而且更加简单快速。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    @mixin center-children($type:null) {
    display: flex;
    @if $type == horizontal {
    justify-content: center;
    }
    @else if $type == vertical {
    align-items: center;
    }
    @else {
    justify-content: center;
    align-items: center;
    }
    }

3. 装逼时刻开始

装备已经换好,先看看样例:

总结:

  • 水平垂直居中: @include center-children;
  • 水平居中:@include center-children(horizontal);
  • 垂直居中:@include center-children(vertical);