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

使用 Flexbox 实现子元素的居中效果，只需三行代码：

CSS Code复制内容到剪贴板

@mixin center-children {   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   

由于 Flexbox 还是比较新的属性，那么添加上相关的浏览器前缀的话，会让它拥有更广泛的兼容性。

CSS Code复制内容到剪贴板

.parent {   
    @include center-children;   
}  

正如你料想的那样，就这么简单我们就实现了：

CSS Code复制内容到剪贴板

.parent {   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}  

总结

我们就想要一个简短的 mixin 让元素在父容器中居中，我们做到了，而且做的更好。它不仅仅简单易用无副作用，而且提供了良好的开发接口。