6种不同的CSS实现垂直水平居中-优快云博客

本文链接：https://blog.youkuaiyun.com/fengzheng0603/article/details/84924880

本文介绍了六种使用CSS实现元素垂直水平居中的方法，包括使用table-cell、flexbox、绝对定位、inline-block等不同布局方式，适用于各种前端开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

6种不同的CSS实现垂直水平居中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Analytics Model</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #cccccc; 
            margin-top: 10px;
        }

        .box1{
            display: table-cell;
            vertical-align: middle;
            text-align: center;      
        }
        .box1 span{
            display: inline-block;
        }

        .box2{
            display: flex;
            justify-content:center;
            flex-direction:column;
            text-align: center;
        }

        .box3{position:relative;}
        .box3 div{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
        .box3 span{
            display: inline-block;
        }


        .box4{
            text-align:center;
            font-size:0;
        }
        .box4 div{
            vertical-align:middle;
            display:inline-block;
            font-size:16px;
        }
        .box4 span{
            display: inline-block;
        }
        .box4:after{
            content:'';
            width:0;
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }


        .box5{
            display: flex;
            text-align: center;
        }
        .box5 div{
            margin: auto;
        }
        .box5 span{
            display: inline-block;
        }



        .box6{
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
            -webkit-box-orient: vertical;
            text-align: center;
        }
        .box6 span{
            display: inline-block;
        }

    </style>
</head>
<body style="background-color: #f9fafc; margin:0px;">
<div class="box box1">
        <span>1垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div class="box box2">
        <span>2垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

<div class="box box3">
    <div>
        <span>3垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div class="box box4">
    <div>
        <span>4垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>


<div class="box box5">
    <div>
        <span>5垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
    </div>
</div>

<div class="box box6">
        <span>6垂直居中垂直居中垂直居中垂直居中垂直居中</span>
        <span>垂直居中</span>
</div>

</body>
</html>