一、水平居中
1、margin:0 auto;
適用于塊級(jí)元素，并且對(duì)浮動(dòng)元素和定位元素?zé)o效
2、text-align:center
適用于圖片、按鈕、文字等行內(nèi)元素（display為inline或inline-block），寫在父元素上對(duì)子元素有效
3、使用浮動(dòng)配合相對(duì)定位來(lái)進(jìn)行水平居中
浮動(dòng)居中的原理：把浮動(dòng)元素相對(duì)定位到父元素寬度50%的地方，但這個(gè)時(shí)候元素還不是居中的，而是比居中的那個(gè)位置多出了自身一半的寬度，這時(shí)就需要他里面的子元素再用一個(gè)相對(duì)定位，把那多出自身一半的寬度拉回來(lái)，因?yàn)橄鄬?duì)定位正是相對(duì)于自身來(lái)定位的，所以自身一半的高度只要把left或right設(shè)為50%就可以得到了。
二、垂直居中
line-height 適用于一行文字，也是寫在父元素上
三、垂直水平居中
1、利用表格
表格本身居中只要用到td或th元素的text-align:"center"和vertical-align:"middle"就可以實(shí)現(xiàn)里面內(nèi)容的水平和垂直居中問(wèn)題了，而且表格默認(rèn)的就會(huì)對(duì)它里面的內(nèi)容進(jìn)行垂直居中。
因此對(duì)于那些不是表格的元素，我們可以通過(guò)display:table-cell來(lái)把它模擬成一個(gè)表格單元格，這樣就可以利用表格的居中特性了。
2、使用絕對(duì)定位來(lái)居中
適用于已經(jīng)知道寬度和高度的元素。絕對(duì)定位進(jìn)行居中的原理是通過(guò)把這個(gè)絕對(duì)定位元素的left或top的屬性設(shè)為50%，此時(shí)元素并不是居中的，而是比居中的位置向右向下偏了這個(gè)元素寬度或高度的一半的距離，所以需要使用一個(gè)負(fù)的margin-left或margin-top的值把它拉回到居中的位置，這個(gè)負(fù)的margin值就取元素寬度和高度的一半。
如果只想實(shí)現(xiàn)一個(gè)方向的居中，則可以使用left,margin-left來(lái)實(shí)現(xiàn)水平居中，使用top,margin-top來(lái)實(shí)現(xiàn)垂直居中。
3、另一種使用絕對(duì)定位居中的方法
在寬高確定的情況下，只要上下，左右位置分別相同就可以了，可以設(shè)置四個(gè)都是0，沒(méi)有設(shè)置寬高的情況下會(huì)根據(jù)上下左右設(shè)置的位置決定大小。
