參考鏈接：
http://www.w3cplus.com/css/elements-horizontally-center-with-css.html
1、行內(nèi)元素的居中，例如想設(shè)置文本、圖片等行內(nèi)元素水平居中時(shí)，可以通過(guò)父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)，即給需要設(shè)置的元素添加一個(gè)父元素的容器，然后設(shè)置這個(gè)父元素（容器）的text-align屬性即可。方法簡(jiǎn)單，原理也很容易理解，需要注意的是只能針對(duì)行內(nèi)元素；
2**、寬度一定的塊狀元素居中**。因?yàn)槭菈K狀元素，所以就沒(méi)辦法運(yùn)用第一種方法的text-align屬性了，這次我們是通過(guò)對(duì)需要設(shè)置的元素的“左右margin”值為“auto”來(lái)實(shí)現(xiàn)，margin的上下值可以根據(jù)需求隨意設(shè)置，但是左右一定要為”auto”！需要注意的是，在設(shè)置 margin:20px auto 之前，一定要先設(shè)置width的值，即最后的設(shè)置樣例為：
div { border:2px solid red;width:100px; margin:20px auto;}
即2個(gè)像素寬的紅色實(shí)體邊框，整個(gè)div元素的寬度為100像素，上下距離瀏覽器的空白邊距為20像素，左右根據(jù)內(nèi)容自動(dòng)調(diào)整，這樣就實(shí)現(xiàn)了塊狀元素的居中顯示，別忘了，要先設(shè)置width：寬度值！寬度值！寬度值！這種方法優(yōu)點(diǎn)是簡(jiǎn)單易懂，兼容性也強(qiáng)，但是擴(kuò)展性比較差，無(wú)法自適應(yīng)未知寬度的元素。
3、寬度不確定塊狀元素的居中顯示。這里大概也可以分為三個(gè)方法：
1）運(yùn)用table標(biāo)簽；2）設(shè)置display:inline；3）設(shè)置position:relative和left:50%。
3.1、運(yùn)用table標(biāo)簽。第一步：在需要設(shè)置的元素外面加上一個(gè)table標(biāo)簽（包括，是不是有點(diǎn)類似設(shè)置行內(nèi)元素時(shí)添加一個(gè)父元素的容器呢？）。第二步：給這個(gè)table設(shè)置”左右margin居中”（這里又和設(shè)置定寬塊狀元素的方法一樣了）。代碼樣例：
總結(jié)：就是將需要進(jìn)行居中的元素，用一個(gè)大表格將其圍起來(lái)（而且這個(gè)表格只有這一個(gè)單元格哦），然后設(shè)置表格的屬性（如第2條方法）居中就行。不過(guò)缺點(diǎn)是加了不少的無(wú)用標(biāo)簽，代碼看起來(lái)比較臃腫。
3.2、改變塊級(jí)元素的display為inline類型，然后設(shè)置text-align:center來(lái)實(shí)現(xiàn)居中效果。代碼樣例：
總結(jié)：基本思想也就是將父元素（容器）先往右偏移父容器寬度的50%，然后再將列表的元素向左相對(duì)偏移50%，就可以得到居中的效果。
more：
父元素寬度已固定：
1.可以在外層加一個(gè)div，外層的div采用margin居中，里層的div設(shè)置寬度為100%。
2、設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:50%;其中的left是寬度的一半。
父元素寬度未知：
3.父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)右移動(dòng)50%，或者子元素相對(duì)左移動(dòng)-50%也就可以了。
4.父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)左移動(dòng)-50%。
