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

2024-07-11 09:00:59

字體：大中小

來源：轉載

供稿：網友

　　table-cell輕松設置文本圖片水平垂直居中

　　讓一個元素垂直居中的思路：把這個元素的容器設置為table-cell，也就是具有表格單元格的特性，再使用vertical-align(這個屬性對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%,這樣元素的左邊邊界線和該元素的父級元素的水平方向的中線重合，設置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不支持,移動端的網頁開發可以使用這種方式/