css实现八种垂直居中方式_css 垂直居中布局-CSDN博客

本文链接：https://blog.csdn.net/weixin_43478503/article/details/117257059

本文详细介绍了CSS实现垂直居中的八种方法，包括flex布局、margin+transform、绝对定位+translate、绝对定位+margin：auto、grid网格布局、table-cell、inline-block+vertical-align以及绝对定位+负margin值。每种方法都有其适用场景，读者可以根据实际需求选择合适的技术进行布局。

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

先给出html，下面用八种方式来实现垂直居中。

<body>
    <div class="box">
        <div class="contain">
            居中的盒子
        </div>
    </div>
</body>

在这里插入图片描述

一、使用flex布局实现

通过flex布局的justify-content和align-items，设置水平和垂直居中。

<style>
        .box {
            width: 800px;
            height: 800px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .contain {
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>

二、margin+transform实现

子盒子设置margin：50% auto，此时盒子水平居中，垂直居中偏下。
在这里插入图片描述
因此需要通过translateY（-50%）上移自身高度的一半。

<style>
        .box {
            width: 800px;
            height: 800px;
            background-color: pink;
            overflow: hidden;
        }
        
        .contain {
            width: 200px;
            height: 200px;
            background-color: plum;
            margin: 50% auto;
            transform: translateY(-50%);
        }
    </style>

需要特别注意的是，由于外边距合并问题，需要给父元素添加overflow：hidden来解决，否则margin属性将合并到父盒子，父子盒子一起下移50%。

三、绝对定位+translate

通过position绝对定位的方法，设置盒子距离顶部及左侧距离50%，在分别向上、向左移动自身宽度的一半。
注意父盒子设置为相对定位，否则子盒子的绝对定位将相对于浏览器。

<style>
        .box {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
        
        .contain {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: plum;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
 </style>

四、绝对定位+margin：auto

绝对定位除了上面那种方法，还可以不用translate，对margin设置为auto。如果没有设置margin值为auto，会发现盒子是靠左上的，这是由于优先级问题，在top和bottom的值相等时，会优先选择top（left和right同理）。margin：auto会去计算子元素和父元素之间的边距，实现居中。
但是，margin只计算左右边距，即margin：auto时上下边距为0，加个绝对定位后，margin-top、margin-bottom将会加入计算，并非为0.

<style>
        .box {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
        
        .contain {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: plum;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

五、grid网格布局实现

justify-self设置单元格内容的水平位置
，align-self设置单元格内容的垂直位置，且这两个属性都是针对单个网格。

 <style>
        .box {
            display: grid;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
        
        .contain {
            width: 200px;
            height: 200px;
            background-color: plum;
            align-self: center;
            justify-self: center;
        }
    </style>

六、使用table-cell实现

table-cell可以实现动态垂直居中，当子盒子不确定高度与宽度时可以使用这个方法，但是它的兼容性不高，对margin不感知，并且会被float、position等属性破坏效果，要避免同时使用。

 <style>
        .box {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
        
        .contain {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>

七、inline-block+vertical-align实现

<style>
        .box {
            text-align: center;
            width: 800px;
            height: 800px;
            line-height: 800px;
            background-color: pink;
        }
        
        .contain {
            display: inline-block;
            vertical-align: middle;
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>

八、绝对定位+负margin值

与translate相比，这个方法不适合宽度和高度自适应的盒子，因为margin值为宽和高的一半，是写死的，如果盒子宽高改变了，那移动的距离应该随之变换。

<style>
     .box {
         position: relative;
         width: 800px;
         height: 800px;
         background-color: pink;
     }
     
     .contain {
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: plum;
         top: 50%;
         left: 50%;
         margin-top: -100px;/* 盒子高的一半 */
         margin-left: -100px;/* 盒子宽的一半 */
     }
</style>