利用CSS的Sass预处理器（框架）来制作居中效果

    } @else {   
        // Go with `margin-top` and `translateX`   
    }   
}  

通过上面的代码，我们已经搭好了 mixin 的骨架，只需要再添加上具体的逻辑代码即可：

CSS Code复制内容到剪贴板

@mixin center($width: null, $height: null) {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
  
    @if not $width and not $height {   
        transform: translate(-50%, -50%);   
    } @else if $width and $height {   
        width: $width;   
        height: $height;   
        margin: -($width / 2) #{0 0} -($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%);   
    }   
}   
  

注意！上面代码中的 #{0 0} 实际上一种容错措施，如果直接使用 0 0 的话，Sass 解析器会尝试进行数值运算（在这里会自动进行 0 -($height / 2) 的数学运算），进而导致我们得到 margin: mt 0 ml; 而不是想要得到的 margin: mt 0 0 ml;。
深入浅出

基本的功能实现后，我们还可以添加更多的特性，比如添加 @support 来检查浏览器对 CSS transform 的支持度，进而可以根据 CSS transform 的支持度输出相应的条件样式。此外，我们还可以更严谨地去测试出入的参数是否是有效数值……

使用 Flexbox

看到 Flexbox 这个词是不是就很兴奋啊，少年！确实，使用 Flexbox 确实是最简单的方式，它和前面方法主要的差别在于，使用 Flexbox 需要为父容器设定相关样式，而使用前面的方法则主要是为子元素设定相关样式（当然，父容器需要被设定为除 static 之外的任意 position）。