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

旧城等待， 2021-12-21 11:29 525阅读 0赞

最近做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>

运行结果：

![1327126-20190319145425972-1018495275.png][]

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>

运行效果：

![1327126-20190319150018299-1135890937.png][]

法二：使用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>

运行效果：

![1327126-20190319150717270-44711965.png][]

法三：绝对定位时的一种巧妙方法

<!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>

运行效果：

![1327126-20190319151939006-1380781207.png][]

二、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>

运行效果：

![1327126-20190319143812341-101931144.png][]

法二：利用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>

运行效果：

![1327126-20190319153454363-1937176493.png][]

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>

运行效果：

![1327126-20190319154331499-1158602876.png][]

\----------------------------------分割线--------------------------------

以上就是我目前知道的一些方法，如果后期还有新的方法，我会及时更新，方便自己，也方便他人。

转载于:https://www.cnblogs.com/FHC1994/p/10558676.html

[1327126-20190319145425972-1018495275.png]: /images/20211221/c651c5a6e6364c80b14af6abb4bd7d77.png
[1327126-20190319150018299-1135890937.png]: /images/20211221/3c3930c88d14495b86d4f25e8efc3660.png
[1327126-20190319150717270-44711965.png]: /images/20211221/c06ab8e1a9f743408773b65bcdcf91dd.png
[1327126-20190319151939006-1380781207.png]: /images/20211221/5f473ac72ef645e3894ee23aa34313d3.png
[1327126-20190319143812341-101931144.png]: /images/20211221/7f7e7bf22dea44bbae413d213bfb4d87.png
[1327126-20190319153454363-1937176493.png]: /images/20211221/f2066ec31ee64648a925c41a13c4a1b3.png
[1327126-20190319154331499-1158602876.png]: /images/20211221/d6ef2fbc9e844d91bb08941473cb1963.png