居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案，比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案，而在《CSS制作图片水平垂直居中》一文介绍了四种实现图片垂直居中的方案，并且在《CSS3实现水平垂直居中》使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太烦了，也有人使用jQuery的方法实现水平垂直居中效果，比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介绍的。今天我在这篇文章中向大家介绍实现水平居中的六种不同方法，希望对大家有所帮助。

伸缩盒模型（flexbox）是一个新的盒子模型，主要优化了UI布局。作为实际布局的第一个CSS模块（浮动真的应该主要用来制作文本围绕图片这样的效果），它使很多任务容易多。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。Flexbox一直都存在。它最开始作为Mozilla XUL的一个功能，被用来制作程序界面，如Firefox的工具栏，就多次使用这个属性。该规范最近才达到稳定，在主要的浏览器对新的版本有相当完整的支持。然而有一些事项需要注意。在IE中规范更改了他的语法，因此你将需要使用一个稍微不同的语法。Chrome当前版本仍然需要添加前缀“-webkit-”，而Firefox和Safari仍然还在使用最老版本的语法。Firefox已经更新为最新的规范，但是，在实际项目中目前最好还先别使用最新的规范，直到它被认为没有bug了或者更稳定了，在使用。在这之前，Firefox还是使用最老的语法规范。根据David Storey的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译，再次向大家介绍了Flexbox的使用，以及罗列出Flexbox布局模块在各规范下的属性对比。

CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果，而不喜欢说其是问题)并不是常陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。早前在水平垂直居中系列、八种创建等高列布局和如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈，用几种新方法和大家探讨这几个效果，希望能帮助大家开拓思维。

虽然使用 CSS 创建居中效果需要耍一些花招，特别是垂直居中效果，但我认为由此生出的诋毁，对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了，而且作为一名前端开发者，你真的有必要对其中的原理了解一二。写这篇文章的目的不是为了向各位解释这些方法的工作原理，而是介绍将这些方法编写为 Sass mixin 的方式，继而将它们复用到各类项目中。如果你还不熟悉使用 CSS 创建居中效果的方法，我建议你仔细阅读以下这篇文章：Centering In CSS: A Complete Guide。

垂直居中、水平居中或者说水平垂直居中的方案很多种，但在实际当中，不管是具体业务或者入职面试，很多同学都有失足之处。那么使用CSS实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章，可以说这篇文章涵盖了各式各样的居中方法，希望这篇文章能帮你解决选择困难症~

让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置text-align:center;；如果是一个块元素，我们可以使用margin:auto;。然而，只要一想到让一个元素垂直居中，让人死的心都有了。多年来，垂直居中已成为CSS的不朽神话，也是前端专业人士群体中的一个内部笑话。