css實現垂直居中的幾種常見方法

時間 2019-11-08

標籤 css 實現垂直居中幾種常見方法欄目 CSS 简体版

原文原文鏈接

1.若是是單行文本。(子元素是塊級元素，則設置子元素的line-height等於父元素的高，可以使子元素垂直居中與父元素)html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            width: 500px;
            height: 500px;
            background: gray;
        } 
        #wrapper p{
            line-height: 500px;//行高=父級的height，垂直居中。半行間距上下爲250px
            text-align: center;//水平居中
        }
    </style>
</head>
<body>
<div id="wrapper">
    <p>這是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>

二、對於已知高度的塊級子元素，子元素採用絕對定位，{position: absolute;top:50%; height: 300px; margin-top: -150px;}app

另外一種的絕對定位：子元素無論是塊級，行內。未知高度的子元素，設置子元素{ position: absolute;top:50%;left:50%;width:100%;佈局

transform:translate(-50%,-50%);text-align: center;}flex

translate:移動，transform的一個方法spa

經過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）位置參數：code

用法transform: translate(50px, 100px);orm

適用：絕對定位爲頁面佈局沒有影響的狀況下能夠使用，而且子級的高度是已知的htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            position: relative;//父級
            width: 500px;
            height: 500px;
            background: gray;
        } 
        #wrapper p{
            position: absolute;//子級用絕對定位
            top:50%;//先定位到50%的位置
            height: 300px;//已知的高度
            margin-top: -150px;//往上提自己高度的一半
        }
    </style>
</head>
<body>
<div id="wrapper">
    <p>這是一段要垂直水平居中的文字！這是一段要垂直水平居中的文字！</p>
</div>
</body>
</html>

3、對於已知塊級子級元素的高度，並且不能用絕對定位來佈局的狀況，（利用一個空的div讓其width爲100%，高度爲父元素的50%。適用：對於絕對佈局有影響，不能適用position:absolute的元素，能夠用如下這種方法。思路是：用一個塊級元素，設置已知大小，在讓其高度達到父級容器的一半大小，再把要居中的元素往上提半個高度。跟方法2同理。blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
            overflow: hidden;
        }       
        #null{//利用一個空的div讓其width爲100%，高度父元素的50%
            width: 100%;
            height: 50%;
            background: yellow;
        }
        #content {
            height: 100px;
            margin: -50px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="null"></div>
    <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧中吧~</div>
</div>
</body>
</html>

5.在無論子元素是（行內，或者塊級）子元素未知高度的狀況下，父級元素使用頁面佈局

{display: table-cell;

vertical-align: middle;

text-align: center;

}

或者父級使用{

display：table；

}

子級使用

{text-align: center; display: table-cell; vertical-align: middle;}

又或者使用父級使用 flex佈局

{display: flex;

justify-content:center;（全部的行做爲一個總體，在主軸上的排列方式爲居中）

align-items:Center;}當只有單行時，align-content失效，align-items設置爲center，items彼此之間的對齊方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
           background: gray;
            width: 500px;
            height: 500px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        } 
        #content {}
    </style>
</head>
<body>
<div id="wrapper">
    <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span>
</div>
</body>
</html>
或者父級使用：display: table;子級使用display: table-cell;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
           background: gray;
            width: 500px;
            height: 500px;
            display: table;
        } 
        #content {text-align: center;
            display: table-cell;
            vertical-align: middle;}
    </style>
</head>
<body>
<div id="wrapper">
    <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。