css实现八种垂直居中方式_css 垂直居中布局

作者：盐析白兔 | 2024-06-11 10:19:04

踩

css 垂直居中布局

文章目录

一、使用flex布局实现
二、margin+transform实现
三、绝对定位+translate
四、绝对定位+margin：auto
五、grid网格布局实现
六、使用table-cell实现
七、inline-block+vertical-align实现
八、绝对定位+负margin值
总结

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

<body>
    <div class="box">
        <div class="contain">
            居中的盒子
        </div>
    </div>
</body>
1
2
3
4
5
6
7

在这里插入图片描述

一、使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、margin+transform实现

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

<style>
        .box {
   
            width: 800px;
            height: 800px;
            background-1
2
3
4
5

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/702763