CSS——div垂直居中及div內文字垂直居中

時間 2020-12-29

　　最近做demo時，經常需要div垂直居中或者讓div內文字相對div垂直居中。水平居中比較簡單，就不多說了，這裏主要記錄一下垂直居中的一些方法。

一、div垂直居中的一些方法：

1.當height、width固定大小時，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            width: 300px;
            height: 300px;
            background: red;
            margin: 0 auto; /*水平居中*/
            position: relative;
            top: 50%; /*偏移*/
            margin-top: -150px;
        }
    </style>
</html>

運行結果：

2.當height、width大小是百分比時，有如下三種方法可以實現：

法一：使用CSS3的transform屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            height: 30%;
            width: 30%;
            background: green;
            
            position: relative;
            top: 50%; 
            transform: translateY(-50%);/* 元素往下位移自身高度50%的距離 */
        }
    </style>
</html>

運行效果：

法二：使用CSS3的彈性佈局（flex）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1">
            <div class="div2"></div>
        </div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            height: 100%;
            width: 100%;
            display: flex;/*設置爲彈性容器*/
            align-items: center; /*定義div1的元素垂直居中*/
            justify-content: center; /*定義div1的裏的元素水平居中*/
            background: green;
        }
        .div2{
            width: 50%;
            height: 50%;
            background: red;
        }
    </style>
</html>

運行效果：

法三：絕對定位時的一種巧妙方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1"></div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            height: 50%;
            width: 50%;
            background: red;
                        
            position:absolute; /*這裏必須是absolute絕對定位*/
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin:auto;
        }
    </style>
</html>

運行效果：

二、div內文字相對div垂直居中的一些方法：

1.當height、width固定大小時，有如下兩種方法可以實現：

法一：只要保證line-height和height相同，即可保證div內的文字垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字垂直居中</title>
    </head>
    <body>
        <div class="div1">我的文字1</div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            height: 100px;
            line-height: 100px;
            width: 100px;
            background: red;        
        }
    </style>
</html>

運行效果：

法二：利用table-cell實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1">文字垂直居中</div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            /*這裏的寬和高必須固定*/
            height: 500px; 
            width: 500px;
            display:table-cell;
            vertical-align: middle;
            background: green;            
        }

    </style>
</html>

運行效果：

2.當height、width是百分比大小時，上面的方法就不適用了，用如下方法：

法一：借鑑了CSS3的彈性佈局（flex）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
    </head>
    <body>
        <div class="div1">
            <div class="div2">文字垂直居中</div>
        </div>
    </body>
    <style>
        html,body{
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        .div1{
            /*這裏的寬和高必須固定*/
            height: 50%; 
            width: 50%;
            background: red;
            display: flex;/*設置爲彈性容器*/
            align-items: center; /*定義div1的元素垂直居中*/
            justify-content: center; /*定義div1的裏的元素水平居中*/        
        }
        .div2{
            background: green;
        }

    </style>
</html>

運行效果：

----------------------------------分割線--------------------------------

以上就是我目前知道的一些方法，如果後期還有新的方法，我會及時更新，方便自己，也方便他人。