“完全居中”法是解决居中问题的好方法，同时也有许多可以满足不同需求的其他方法。最常见的，推荐的方法有负margin值、transform法、table-cell法、inline-block法、以及现在出现的Flexbox法，这些方法其他文章都有深入介绍，所以这里只会稍稍提及。

　　负margin值

　　这或许是最常用的方法。如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。

　　需要注意的是，这是按照预想情况也能在工作在IE6-7下的唯一方法。

1

2

3

4

5

6

7

8

9

.is-Negative {

        width: 300px;

        height: 200px;

        padding: 20px;

        position: absolute;

        top: 50%; left: 50%;

        margin-left: -170px; /* (width + padding)/2 */

        margin-top: -120px; /* (height + padding)/2 */

}

　　好处：

浏览器兼容性非常好，甚至支持IE6-7

需要的编码量很少

　　同时注意：

　　transform法

　　和“完全居中”法的好处一样，简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

1

2

3

4

5

6

7

8

9

.is-Transformed {

  width: 50%;

  margin: auto;

  position: absolute;

  top: 50%; left: 50%;

  -webkit-transform: translate(-50%,-50%);

      -ms-transform: translate(-50%,-50%);

          transform: translate(-50%,-50%);

}

　　好处：

内容高度可变

代码量小

　　同时注意：

　　table-cell法

　　这种可能是最好的方法，因为高度可以随内容改变，浏览器支持也不差。主要缺陷是会产生额外的标签，每一个需要居中的元素需要三个额外的HTML标签。

　　HTML:

1

2

3

4

5

6

7

<div class="Center-Container is-Table">

  <div class="Table-Cell">

    <div class="Center-Block">

    <!-- CONTENT -->

    </div>

  </div>

</div>

　　CSS:

1

2

3

4

5

6

7

8

9

.Center-Container.is-Table { display: table; }

.is-Table .Table-Cell {

  display: table-cell;

  vertical-align: middle;

}

.is-Table .Center-Block {

  width: 50%;

  margin: 0 auto;

}

　　好处：

　　同时注意：

需要额外的HTML标签

　　inline-block法

　　迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。

　　内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！

　　如果内容块需要尽可能大地占用水平空间，可以为大容器加上max-width: 99%;样式，或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。

　　这种方法和table-cell的大多数好处相同，不过最初我放弃了这个方法，因为它更像是hack。不管这一点的话，浏览器支持很不错，而且也被证实是很流行的方法。

　　HTML:

1

2

3

4

5

<div class="Center-Container is-Inline">

  <div class="Center-Block">

    <!-- CONTENT -->

  </div>

</div>

　　CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.Center-Container.is-Inline {

  text-align: center;

  overflow: auto;

}

 

.Center-Container.is-Inline:after,

.is-Inline .Center-Block {

  display: inline-block;

  vertical-align: middle;

}

 

.Center-Container.is-Inline:after {

  content: '';

  height: 100%;

  margin-left: -0.25em; /* To offset spacing. May vary by font */

}

 

.is-Inline .Center-Block {

  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */

  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */

}

　　好处：

　　同时注意：

　　Flexbox法

　　CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.Center-Container.is-Flexbox {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-box-align: center;

     -moz-box-align: center;

     -ms-flex-align: center;

  -webkit-align-items: center;

          align-items: center;

  -webkit-box-pack: center;

     -moz-box-pack: center;

     -ms-flex-pack: center;

  -webkit-justify-content: center;

          justify-content: center;

}

　　好处：

内容可以是任意高宽，溢出也能表现良好

可以用于各种高级布局技巧

　　同时注意： 不支持IE8-9

　最后的建议

　　各项技术都有各自的好处，采取什么样的方法，取决于你所支持的浏览器，以及现有标签的结构。请使用上面提供对照表帮你选出最符合你需要的方法。

　　“完全居中”法简单方便，迅速及时。以前使用负Margin值的地方，都可以使用Absolute居中。无需繁琐的数学计算，无需额外标签，而且可以随时改变大小。

　　如果网站需要可变高度的内容，而且同时照顾到浏览器兼容性的话，可以尝试table-cell和inline-block技术，如果想尝试新鲜事物的话，可以使用Flexbox，并享受这种高级技术带来的好处。