先来一个常见的案例，把一张图片和下方文字进行居中：

      首先处理左右居中，考虑到img是一个行内元素，下方的文字内容也是行内元素，因此直接用text-align即可：

.container{ text-align火星

      实际的效果如下：

火星

       这样做的问题是，直接在最外层的container设置一个text-align的属性，导致所有子元素都会继承，假设图片标题下方还有文字描述，那么这个文字描述也会被居中，如下所示：

火星

火星（Mars）是太阳系八大行星之一，天文符号是♂

       但实际上是希望文字描述向左对齐，这样就不得不在文字描述添加一个text-align:left的属性，覆盖父元素的属性，并且如果还有更多的子元素也需要这样做，覆盖属性本身就是下策，因此这里采用其它的办法。由于显示的图片是变化的，宽高是不定的，所以一般会显示地给图片设置一个宽高。如果知道宽度就可以用margin: 0 auto的方法，左右的margin值设置为auto，浏览器就会自动设置左右的margin值为容器剩余宽度的一半：

火星

火星（Mars）是太阳系八大行星之一，天文符号是♂

 代码如下：

figure{ width margin: 0 auto; } figcaption{ text-align火星火星（Mars）是太阳系八大行星之一，天文符号是♂

　　需要注意的是，这个办法对上下居中不适用。

      使用margin: 0 auto可以说是最常见的左右居中方法，不仅适用于块元素也适用于行内元素。很多网页的布局都是主体内容固定宽度同时居中显示，例如淘宝PC端：

       查看最外层的容器的样式就可以发现使用了margin: 0 auto:

       接下来讨论垂直居中，麻烦的是垂直居中。不过垂直居中有一个比较通用的办法，那就是借助table-cell的垂直居中。方法是给父容器添加以下属性：

.container{ display: table-cell; vertical-align: middle; }

      效果如下：

火星

      使用table-cell的缺点是容器的magin属性失效了，因为margin不适用于表格布局。所以如果要把container居中的话，使用margin: 0 auto就不起作用了。解决的办法是在container外层再套多一个容器，然后让这个display为block的容器margin: 0 auto就可以了。

      另外一个缺点是table-cell的元素设置宽高为百分比的时候将不起作用，常见的场景是要将宽度设置为外层容器宽度的100%，解决办法是将container的宽度设置成一个很大的值，例如3000px，这样就达到100%的目的。还有一个问题是不兼容IE6/7，但现在生产环境基本上不需要兼容IE6/7了。

      这种方法有失效的时候，那就是container需要设置position为absolute时。因为设置position: absolute就会把(非flex)元素的display强制设置成block。解决办法还是模仿上面的，外层再套多一个容器，将absolute作用于这个容器，副作用是设置内层container的height和width为百分比时会失效(除非将它的position也设置成absolute)。由于这个原因，导致有一种情况不能使用display: table-cell垂直居中。

      这种场景就是需要在页面弹个框，这个框的位置需要在当前屏幕左右上下居中:

      通常需要将这个框的positiion设置成absolute，这个时候table-cell就不能发挥作用了，即使你在外面再套多两层，最外层为absolute，里层为table-cell，但由于里层无法设置height为外层的100%，也就是说高度无法刚好占满整个屏幕，所以不能起作用。

      解决办法是使用relative定位，设置top为50%，再设置margin-top为元素高度的负的一半。一开始设置top 50%，将弹框的起始位置放到页面中间，然后再设置margin-top为弹框高度的一半取负，这样使得弹框在页面中间位置再往上移一半自身的高度，这样就刚好在正中间了，左右居中也可类似处理：

.mask{ position .outer{ position top left margin-top margin-left .container{ width height display vertical-align

效果如下：

火星