table-cell輕松設置文本圖片水平垂直居中
讓一個(gè)元素垂直居中的思路：把這個(gè)元素的容器設置為table-cell，也就是具有表格單元格的特性，再使用vertical-align(這個(gè)屬性對block元素不起作用，但對table-cell元素是有效的)設置元素垂直居中，即可達到我們想要的效果。
IE7及以下版本不支持此方法，IE8及以上版本及大部分的主流瀏覽器都很好的支持。
HTML代碼
代碼如下
樣式規則
.img{
display:table-cell;
vertical-align:middle;
width:400px; height:500px;
text-align:center;
border:#CCC 1px solid;
}
/*IE7不支持該方法*/
使用相對定位使元素水平和垂直居中
利用相對定位使元素水平居中：要求元素有固定的寬度，設置元素的left:50%,這樣元素的左邊邊界線(xiàn)和該元素的父級元素的水平方向的中線(xiàn)重合，設置margin-left,值為負的元素寬度的一半，讓元素向左移動(dòng)半個(gè)寬度的位置，就可以使元素水平方向的中線(xiàn)與父級元素的中線(xiàn)重合，即實(shí)現了元素的水平居中。
舉例：讓一個(gè)容器元素水平居中顯示，寬度:960px;
width:960px; position:relative; left:50%; margin-left:-480px;
上面這段代碼和下面的這段代碼等價(jià)，使用margin:0 auto;讓元素居中，被廣泛的使用，大家都很熟悉
width:960px; margin:0 auto;
利用相對定位使元素垂直居中：要求元素有固定的高度，設置元素的top:50%,這樣元素的上邊邊界線(xiàn)和該元素的父級元素的垂直方向的中線(xiàn)重合，設置margin-top,值為負的元素高度的一半，讓元素向上移動(dòng)半個(gè)高度的位置，就可以使元素的垂直方向的中線(xiàn)與父級元素的中線(xiàn)重合，即實(shí)現了元素的垂直居中。
以下是利用相對定位實(shí)現元素水平和垂直居中的示例，父級元素.box,該元素占據的空間寬度250px,高度150px;(計算進(jìn)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;
}
示例要實(shí)現的效果：讓span這個(gè)元素在.box中水平垂直居中，首先將span變成一個(gè)塊級元素，使之水平居中可以使用margin:0 auto;這是我們常用的，在這里，我們使用相對定位來(lái)實(shí)現。
使用line-height讓單行文字垂直居中
這種方式是我們大家經(jīng)常用到的，讓標題，按鈕等的文字垂直居中，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不支持,移動(dòng)端的網(wǎng)頁(yè)開(kāi)發(fā)可以使用這種方式*/
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
