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

 */  
.child-with-known-height {   
    @include center($height: 400px);   
}   
  
/**  
 * 让子元素绝对居中于父容器  
 * 向 Sass mixin 传递了高度和宽度，所以就使用负向 margin 处理水平和垂直位置  
 */  
.child-with-known-dimensions {   
    @include center(400px, 400px);   
}  

上述 Sass 代码经过编译之后，输出结果如下：

CSS Code复制内容到剪贴板

.parent {   
    position: relative;   
}   
  
.child-with-unknown-dimensions {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%, -50%);   
}   
  
.child-with-known-width {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -200px;   
    width: 400px;   
    transform: translateY(-50%);   
}   
  
.child-with-known-height {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translateX(-50%);   
    margin-top: -200px;   
    height: 400px;   
}   
  
.child-with-known-dimensions {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -200px;   
    width: 400px;   
    margin-top: -200px;   
    height: 400px;   
}  

还不错，就是看起来有点啰嗦，不过鉴于是用来做 demo 的，也不必太过强求了。

创建 mixin

思路屡清楚了，下面开工！根据上面的代码片段，我们已经知道了这个 mixin 的主要特征：接收两个可选的参数，用来表示元素的宽高（$width 和 $height）。

CSS Code复制内容到剪贴板