第一種方法：table-cell輕松設(shè)置文本圖片水平垂直居中

　　讓一個(gè)元素垂直居中的思路：把這個(gè)元素的容器設(shè)置為table-cell，也就是具有表格單元格的特性，再使用vertical-align(這個(gè)屬性對(duì)block元素不起作用，但對(duì)table-cell元素是有效的)設(shè)置元素垂直居中，即可達(dá)到我們想要的效果。

　　IE7及以下版本不支持此方法，IE8及以上版本及大部分的主流瀏覽器都很好的支持。

　　HTML代碼

第二種方法：使用相對(duì)定位使元素水平和垂直居中

　　利用相對(duì)定位使元素水平居中：要求元素有固定的寬度，設(shè)置元素的left:50%,這樣元素的左邊邊界線和該元素的父級(jí)元素的水平方向的中線重合，設(shè)置margin-left,值為負(fù)的元素寬度的一半，讓元素向左移動(dòng)半個(gè)寬度的位置，就可以使元素水平方向的中線與父級(jí)元素的中線重合，即實(shí)現(xiàn)了元素的水平居中。

　　舉例：讓一個(gè)容器元素水平居中顯示，寬度:960px;

　　width:960px; position:relative; left:50%; margin-left:-480px;

　　上面這段代碼和下面的這段代碼等價(jià)，使用margin:0 auto;讓元素居中，被廣泛的使用，大家都很熟悉

　　width:960px; margin:0 auto;

　　利用相對(duì)定位使元素垂直居中：要求元素有固定的高度，設(shè)置元素的top:50%,這樣元素的上邊邊界線和該元素的父級(jí)元素的垂直方向的中線重合，設(shè)置margin-top,值為負(fù)的元素高度的一半，讓元素向上移動(dòng)半個(gè)高度的位置，就可以使元素的垂直方向的中線與父級(jí)元素的中線重合，即實(shí)現(xiàn)了元素的垂直居中。

　　以下是利用相對(duì)定位實(shí)現(xiàn)元素水平和垂直居中的示例，父級(jí)元素.box,該元素占據(jù)的空間寬度250px,高度150px;(計(jì)算進(jìn)padding的值)

　　示例要實(shí)現(xiàn)的效果：讓span這個(gè)元素在.box中水平垂直居中，首先將span變成一個(gè)塊級(jí)元素，使之水平居中可以使用margin:0 auto;這是我們常用的，在這里，我們使用相對(duì)定位來實(shí)現(xiàn)。

第三種方法：使用line-height讓單行文字垂直居中

　　這種方式是我們大家經(jīng)常用到的，讓標(biāo)題，按鈕等的文字垂直居中，IE6/7/8/9/10，F(xiàn)F,Chrome,Safari都支持

第四種方法：使用絕對(duì)定位讓元素水平垂直居中