CSS 元素居中

1) vertical-align 属性

• 只适用于display为inline或者inline-block的元素
• 与text-align属性不同，vertical-align属性写在子元素里面

原文：
Vertical align only works for inline,inline-blocks,images,and table elements.
It has to be applied on the child element, as oppose to the parent element, unlike text-align.

2) text-align 属性

3) margin: 0 auto; 属性

盒子模型是说HTML中的每个元素都是被包围在一个盒子里面的，这个盒子有四个方面的内容，一个是content，一个是border，在border和content之间就是padding的距离，而border与父容器之间的距离称为margin。这样来记的话就不会混淆margin和padding了。
我们通常设定的width和height其实都是盒子的宽度，更具体的说是border的宽和高。因为margin是对外的，而padding是对内的。所以，我们经常会看到居中对齐的时候会出现margin:0 auto，意思是距父容器顶部距离为0px，而左右下三部分自动调整。
这也就是我们只见过margin：0 auto，却没见过padding：0 auto的原因。因为padding是对内的，padding的调整对盒子在整个页面中的位置根本不能起任何作用。

如果使用margin:0 auto不好使，那么有一个很常见的原因是没有写width。为啥没标明width，margin就不起作用呢？实际上，margin不是没起作用，而是你没看到它起作用。因为如果没著名width的话，那么子容器的宽度会自动充满父容器的宽度。而高度会根据子容器中元素内容的多少而撑开。
这样一来的话，如果width等于父容器的宽度，那么就本来是已经居中的了。
不仅如此，我们可以自己试验一下，如果width设置的比较大（远大于内容的宽度），那么当使用margin属性时会看到内容并没有居中，为啥？因为width太大了，而子容器现在已经是居中的了，但是容器内部的元素并没有居中。
那如何让内容居中呢？我能想到的办法就是让子容器的宽度减少，或者在父元素中写text-align：center将子容器内容居中。

更详细的原文转载戳这里