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中的每個(gè)元素都是被包圍在一個(gè)盒子里面的，這個(gè)盒子有四個(gè)方面的內(nèi)容，一個(gè)是content，一個(gè)是border，在border和content之間就是padding的距離，而border與父容器之間的距離稱為margin。這樣來記的話就不會(huì)混淆margin和padding了。
我們通常設(shè)定的width和height其實(shí)都是盒子的寬度，更具體的說是border的寬和高。因?yàn)閙argin是對外的，而padding是對內(nèi)的。所以，我們經(jīng)常會(huì)看到居中對齊的時(shí)候會(huì)出現(xiàn)margin:0 auto，意思是距父容器頂部距離為0px，而左右下三部分自動(dòng)調(diào)整。
這也就是我們只見過margin：0 auto，卻沒見過padding：0 auto的原因。因?yàn)閜adding是對內(nèi)的，padding的調(diào)整對盒子在整個(gè)頁面中的位置根本不能起任何作用。

如果使用margin:0 auto不好使，那么有一個(gè)很常見的原因是沒有寫width。為啥沒標(biāo)明width，margin就不起作用呢？實(shí)際上，margin不是沒起作用，而是你沒看到它起作用。因?yàn)槿绻麤]著名width的話，那么子容器的寬度會(huì)自動(dòng)充滿父容器的寬度。而高度會(huì)根據(jù)子容器中元素內(nèi)容的多少而撐開。
這樣一來的話，如果width等于父容器的寬度，那么就本來是已經(jīng)居中的了。
不僅如此，我們可以自己試驗(yàn)一下，如果width設(shè)置的比較大（遠(yuǎn)大于內(nèi)容的寬度），那么當(dāng)使用margin屬性時(shí)會(huì)看到內(nèi)容并沒有居中，為啥？因?yàn)閣idth太大了，而子容器現(xiàn)在已經(jīng)是居中的了，但是容器內(nèi)部的元素并沒有居中。
那如何讓內(nèi)容居中呢？我能想到的辦法就是讓子容器的寬度減少，或者在父元素中寫text-align：center將子容器內(nèi)容居中。

更詳細(xì)的原文轉(zhuǎn)載戳這里