CSS垂直居中的方法

時間 2019-11-05

標籤 css 垂直居中方法欄目 CSS 简体版

原文原文鏈接

水平居中的方法很簡單，一般都是一個margin:0 auto搞定，可是垂直居中就沒有那麼簡單了。首先來講說垂直居中的幾種狀況。html

一、文字垂直居中瀏覽器

文字垂直居中的方法通常是設置高度與行高一致，而後文字就垂直居中了。來看下面的示例：佈局

<html>
<head>
<meta charset="gb2312" />
<title>高度自適應佈局</title>
<style>
    p{
        height:100px;
        background-color:#dcdcdc;
        color:#333;
    }
</style>
</head>
<body>
    <div>
        <p style="line-height:100px;">    
            這是一行文字    
        </p>
    </div>
</body>
</html>

其顯示效果以下：flex

二、將一個div垂直居中
下面來將一個div設置到整個瀏覽器的中間，要設置到瀏覽器的中間，因此咱們就要求頁面要佔滿整個瀏覽器，因此從html、body要逐層設置其高度爲100%。spa

<html>
<head>
<meta charset="gb2312" />
<title>高度自適應佈局</title>

<style>
html, body{
    height: 100%;
}

    div{
        width:200px;
        height:200px;
        background-color:#dcdcdc;

        position: relative; 
        top: 50%; /* 向下偏移50% */
        transform: translateY(-50%);    /* 再向上偏移50% */
    }
</style>

</head>
<body>
    <div>
    </div>
</body>
</html>

其效果以下所示：.net

三、CSS3新屬性設置居中
若是是CSS3，則能夠設置外層的display爲flex，而後align-items爲center，justify-content爲center也能夠實現垂直居中的效果。code

<html>
<head>
<meta charset="gb2312" />
<title>高度自適應佈局</title>

<style>
html, body{
    height: 100%;
}

body{
    display: flex;
    align-items: center; /*定義body的元素垂直居中*/
    justify-content: center; /*定義body的裏的元素水平居中*/
}

div{
    width:200px;
    height:200px;
    background-color:#dcdcdc;
}
</style>

</head>
<body>
    <div>
        
    </div>
</body>
</html>

效果以下所示：orm

四、絕對定位實現居中
還有一種能夠應用絕對定位實現居中的，咱們都知道絕對定位是根據其最近relative、absolute父元素來定位的，使用這種方式，咱們根本都不須要設置那麼多的height:100%，只須要將其父元素設置成relative就能夠了，想它相對於那個元素居中就相對於哪一個元素居中。來看示例：htm

<html>
<head>
<meta charset="gb2312" />
<title>高度自適應佈局</title>

<style>
.div_outer{
    width:400px;
    height:400px;
    border:1px solid blue;
    position:relative;
}
.center_middle{
    width:200px;
    height:200px;
    background-color:#dcdcdc;    

    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right: 0;  
}
</style>

</head>
<body>
    <div class="div_outer">
        <div class="center_middle">
            
        </div>
    </div>
</body>
</html>