CSS实现元素垂直居中的六种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/129057681

方法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 255, 0.466); 
            text-align: center;  // 必不可少，否则元素不水平居中
        }
        .small{
            width: 500px;
            height: 500px;
            background-color: rgba(224, 75, 75, 0.808);
            display: inline-block;
            vertical-align: middle;  
            margin: 0 auto;
        }
        .help{
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;  
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div>
        <div class="help"></div>
    </div>
</body>
</html>

方法二：

也可以通过父元素设置伪元素 :before ，然后设置子元素 verticle-align:middle 实现垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 255, 0.466); 
            text-align: center;
        }
        .box::before{
            content: "";
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;  
        }

        .small{
            width: 500px;
            height: 500px;
            background-color: rgba(224, 75, 75, 0.808);
            display: inline-block;
            vertical-align: middle;  
            margin: 0 auto;
        } 
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div> 
    </div>
</body>
</html>

方法三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 255, 0.466); 
            display: flex;
            align-items: center; // 让元素垂直居中
            justify-content: center; // 让元素水平居中
        }
        .small{
            width: 500px;
            height: 500px;
            background-color: rgba(224, 75, 75, 0.808); 
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div> 
    </div>
</body>
</html>

方法四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 255, 255, 0.466); 
            position: relative;
        }
        .small{
            width: 500px;
            height: 500px;
            background-color: rgba(224, 75, 75, 0.808); 
            // 万能适用，尤其是自适应场景也可以直接写具体px
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); 
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div> 
    </div>
</body>
</html>

方法五：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .box{
           width: 100vw;
           height: 100vh;
            line-height: 100vh;
            background-color: rgba(0, 255, 255, 0.466); 
            text-align: center;
        }
        .small{
            width: 500px;
            height: 500px;
            background-color: rgba(224, 75, 75, 0.808);  
             display: inline-block;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div> 
    </div>
</body>
</html>

方法六：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .box {
            width: 100%;
            height: 100%;
            background: red;
            /* BEGIN 垂直居中 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            
             /* END 垂直居中 */
        }
 
        .main {
            width: 200px;
            height: 200px;
            background: palegoldenrod;
            /* 如果水平也需要居中 */
            margin: 0 auto;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="main"></div>
    </div>
</body>
 
</html>

元素垂直水平居中