css中元素水平垂直置中4種方法介紹

table-cell輕鬆設定文本圖片水平垂直置中

讓一個元素垂直置中的思路：把這個元素的容器設定為table-cell，也就是具有表格儲存格的特性，再使用vertical-align（這個屬性對block元素不起作用，但對table-cell元素是有效）設定元素垂直置中，即可達到我們想要的效果。
IE7及以下版本不支援此方法，IE8及以上版本及大部分的主流瀏覽器都很好的支援。
HTML代碼

代碼如下	複製代碼
<div class="img">     <img src="../images/a-1.jpg" alt="" /> </div> 樣式規則 .img{     display:table-cell;     vertical-align:middle;     width:400px; height:500px;     text-align:center;     border:#CCC 1px solid; } /*IE7不支援該方法*/

使用相對定位使元素水平和垂直置中

利用相對定位使元素水平置中：要求元素有固定的寬度，設定元素的left:50%,這樣元素的左邊邊界線和該元素的父級元素的水平方向的中線重合，設定margin-left,值為負的元素寬度的一半，讓元素向左移動半個寬度的位置，就可以使元素水平方向的中線與父級元素的中線重合，即實現了元素的水平置中。
舉例：讓一個容器元素水平置中顯示，寬度:960px;
width:960px; position:relative; left:50%; margin-left:-480px;
上面這段代碼和下面的這段代碼等價，使用margin:0 auto;讓元素置中，被廣泛的使用，大家都很熟悉
width:960px; margin:0 auto;
利用相對定位使元素垂直置中：要求元素有固定的高度，設定元素的top:50%,這樣元素的上邊邊界線和該元素的父級元素的垂直方向的中線重合，設定margin-top,值為負的元素高度的一半，讓元素向上移動半個高度的位置，就可以使元素的垂直方向的中線與父級元素的中線重合，即實現了元素的垂直置中。
以下是利用相對定位實現元素水平和垂直置中的樣本，父級元素.box,該元素佔據的空間寬度250px,高度150px;(計算進padding的值)

代碼如下	複製代碼
.box{     width:300px;     height:200px;     border:#CCC 1px solid; } .box span{     display:block;     width:240px;     height:140px;     background-color:#CCC;     position:relative;     top:50%;     left:50%;     margin:-75px 0 0 -125px;     padding:5px; }

樣本要實現的效果：讓span這個元素在.box中水平垂直置中，首先將span變成一個區塊層級元素，使之水平置中可以使用margin:0 auto;這是我們常用的，在這裡，我們使用相對定位來實現。

使用line-height讓單行文字垂直置中

這種方式是我們大家經常用到的，讓標題，按鈕等的文字垂直置中，IE6/7/8/9/10，FF,Chrome,Safari都支援
.

代碼如下	複製代碼
box_1{     width:300px;     height:55px;     line-height:55px;     text-align:center;     border:#ccc 1px solid; }

使用絕對位置讓元素水平垂直置中

代碼如下	複製代碼
.box_2{     width:300px;     height:200px;     border:#CCC 1px solid;     position:relative;     top:0;     left:0; } .box_2 span{     display: block;     width:240px;     height:140px;     position:absolute;     top:0;     bottom:0;     left:0;     right:0;     margin:auto;     background-color:#ccc;     padding:5px; } /*IE7不支援,移動端的網頁開發可以使用這種方式*/