CSS居中主要分為兩類

1. 水平居中 （水平居中分為行內(nèi)元素居中和塊狀元素居中 塊狀元素居中又分為 定寬元素 和 不定寬元素 居中）

2. 垂直居中

一、水平居中

1. 行內(nèi)元素 居中
   text-align:center;
   ps:適用于行內(nèi)元素或者是塊狀元素 display被設(shè)置為inline的元素，可以在父元素加text-align:center;，但是子元素被float影響的元素不能使用
2. 塊狀元素居中
   定寬：margin:0 auto;
   不定寬：
   方法一： display:table;margin:0 auto;
   方法二：改變塊級(jí)元素的 display 為 inline 類型（設(shè)置為 行內(nèi)元素 顯示），然后使用 text-align:center來(lái)實(shí)現(xiàn)居中效果。
   方法三：通過(guò)給父元素設(shè)置 float，然后給父元素設(shè)置position:relative和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中

二、垂直居中

1. 父元素高度確定的單行文本的垂直居中把父元素的 height 和 line-height 設(shè)置為一直即可實(shí)現(xiàn)垂直居中
   height:60px;line-height:60px;
2. 父元素高度確定的多行文本垂直居中
   方法一：設(shè)置父元素display:table; vertical-align:middle;

   display:table-cell;            /*IE8以上及Chrome、Firefox*/
   vertical-align:middle;        /*IE8以上及Chrome、Firefox*/ 
   

   方法二：
   通過(guò)絕對(duì)定位：
   首先給父元素寫上positon:relative，這么做是為了給子元素打上position:absolute的時(shí)候不會(huì)被定位到外太空去。接下去，寫上子元素的height和width，這個(gè)似乎是必須的，某些瀏覽器在解析的時(shí)候如果沒(méi)有這2個(gè)值的話會(huì)出現(xiàn)意想不到的錯(cuò)位。接著就是整個(gè)方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半`的height值的的負(fù)數(shù);margin- left:一半的weight值的負(fù)數(shù)。

{
width:100px;
height:80px;
position:absolute;
top:50%;
left:50%;
margin-left:50px;
margin-top:40px
}