關於div的水平垂直居中

時間 2019-11-19

標籤關於 div 水平垂直居中欄目 CSS 简体版

原文原文鏈接

水平垂直居中

1、未知寬高

1. table佈局(display:table)

2. 轉化爲行內標籤display:inline-block，藉助另一個標籤高度來實現

3. 絕對佈局（position:absolute）+translate

4. flex佈局（box-flex）

方法一

思路：顯示設置父元素爲table，子元素爲cell-table，這樣就可使用vertical-align：center，實現水平居中。

優勢：父元素（parent）能夠動態的改變高度（table元素的特性）

缺點：IE8如下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

方法二

思路：使用一個空標籤span設置他的vertical-align基準線爲中間，而且讓他爲inline-block，寬度爲0

缺點：多了一個沒用的空標籤，display：inline-block IE 六、7是不支持的

（添加上：_zoom：1;*display:inline）.

固然也可使用僞元素來代替span標籤，不過IE支持也很差。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent2{
    height:300px;
    width: 300px;
    text-align: center;
    background: #FD0C70;
}
.parent2 span{
    display: inline-block;;
    width: 0;
    height: 100%;
    vertical-align: middle;
    zoom: 1;/*BFC*/
    *display: inline;
}
.parent2 .child{
    display: inline-block;
    color: #fff;
    zoom: 1;/*BFC*/
    *display: inline;
}
</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
    <div class="parent2">
        <span></span>
        <div class="child">hello world-2</div>
    </div>
</body>
</html>

方法三

思路：子元素絕對定位，距離頂部50%，左邊50%，而後使用css3 transform:translate(-50%,-50%)

優勢：高大上，能夠在webkit內核的瀏覽器中使用

缺點：不支持IE9如下不支持transform屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world-3</div>
    </div>
</body>
</html>

方法四

思路：使用css3 flex佈局

優勢：簡單快捷

缺點：兼容性很差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知寬高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
<div class="parent4">
        <div class="child">hello world-4</div>
    </div>
</body>
</html>

2、

一、假借圖片法

這個方法把一些 div 的顯示方式設置爲inline-block，和圖片同樣，所以咱們可使用圖片的 vertical-align 屬性。

<div id="wrapper">  
    <div id="likeImg">
        <div class="content">Content goes here</div>
    </div>
</div>  
#wrapper {
    display: table;
}
#likeImg {
    display: inline-block;
    vertical-align: center;
}

優勢：

在各類瀏覽器中兼容性都很是好，ie6和7中有間距問題

缺點：

很容易影響其餘的佈局，致使網頁佈局所有癱瘓

二、絕對定位法

這個方法使用絕對定位的 div，把它的 top 設置爲 50％，margin-top設置爲負的 content 高度。這意味着對象必須在 CSS 中指定固定的高度。

由於有固定高度，或許你想給 content 指定 overflow:auto，這樣若是 content 太多的話，就會出現滾動條，以避免content 溢出。

<div class="box">
    <div id="content"> Content goes here</div> 
</div> 
#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* 盒子自己高度的一半 */
}

優勢：

適用於全部瀏覽器

不須要嵌套標籤

缺點：

沒有足夠空間時，content 會消失(相似div 在 body 內，當用戶縮小瀏覽器窗口，滾動條不出現的狀況)

三、插入空標籤浮動

這種方法，在 content 元素外插入一個 div。設置此 div height:50%; margin-bottom:-contentheight;

content 清除浮動，並顯示在中間。

<div id="box">
    <div id="content">Content here</div>
    <div id="floater"> 
</div>
#floater {
    float: left;
    height: 50%;
    margin-bottom: -120px;
}
#content {
    clear: both;
    height: 240px;
    position: relative;
}

優勢：

適用於全部瀏覽器

沒有足夠空間時(例如：窗口縮小) content 不會被截斷，滾動條出現

缺點：

惟一我能想到的就是須要額外的空元素了，可能對於某些強迫症患者來講是不肯意的(這個方法的應用應該也很廣)

四、絕對定位

這個方法使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設置爲 top:0; bottom:0;。可是由於它有固定高度，其實並不能和上下都間距爲 0，所以 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。

<div id="box">
    <div id="content"> Content here</div> 
</div> 
#content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}