垂直居中，绝对的垂直居中，上代码

最新推荐文章于 2024-09-24 17:14:12 发布

今夜你是我的模特

最新推荐文章于 2024-09-24 17:14:12 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端js技术，问题集合文章标签：垂直居中 css垂直居中 flex

本文链接：https://blog.csdn.net/dalqyou/article/details/85338493

前端js技术，问题集合专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了五种在CSS中实现元素垂直居中的方法，包括padding、定位、行高、Flex布局以及inline-block结合vertical-align。每种方法都有清晰的解释和代码示例，帮助开发者更好地理解和应用。

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

垂直居中总方法分为：
一、padding, 通过父级的宽高 - 自身的宽高然后除以2，就得到padding的计算值
二、定位—
又分为两种：
1.position:absolute;letf :50%;top:50%;transform:translate(-50%,-50%)；
2.position:absolute;letf :50%;top:50%;margin-top:-自身高的一半，margin-left:-自身宽的一半，
三、行高：line-height = height 就可以
四、display:flex–
1.父类：display:flex ,子类margin:auto
2.父类：display:flex justify-content: center;align-items: center;
五、设置display:inline-block,利用 vertical-align: middle的垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vertical-align只对inline/inline-block元素起作用</title>
    <style>
        .box {
            height: 200px;
            background: #aaa;
        }

        .a {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        /* 利用伪元素来垂直居中 */

        .box11 {
            height: 200px;
            background: #aaa;
        }

        .box1 {
            height: 200px;
            background: #aaa;
        }

        .box1::after {
            content: " ";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }



        .box2 {
            height: 200px;
            background: #aaa;
        }

        .b {
            display: inline-block;
            vertical-align: middle;

        }

        .bb {
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }


        .box3 {
            height: 200px;
            background: #aaa;
            text-align: center;
        }

        .assist {
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

        .img3 {
            vertical-align: middle;
        }

        .box4 {
            height: 200px;
            background: #aaa;
            text-align: center;
            line-height: 200px;
        }

        .img4 {
            vertical-align: middle;
            margin-top: -4px;
        }



        .box5 {
            height: 200px;
            background: #aaa;
            text-align: center;
        }

        .img5 {
            vertical-align: middle;
        }

        .box5::after {
            content: " ";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

        .box6 {
            height: 200px;
            background: #aaa;
            text-align: center;
            line-height: 200px;
        }

        .p6 {
            line-height: 15px;
            display: inline-block;
            vertical-align: middle;
            margin-top: -4px
        }

        .box7 {
            height: 200px;
            background: #aaa;
            line-height: 200px;
        }

        .p7 {
            display: inline-block;
            vertical-align: middle;
            line-height: 14px;
        }

        .box8 {
            height: 300px;
            background: #ccc;
            display: table-cell;
            /*IE8以上及Chrome、Firefox*/
            vertical-align: middle;
            /*IE8以上及Chrome、Firefox*/
        }
    </style>
</head>

<body>
    <!--  vertical-align只对inline/inline-block元素起作用 -->

    <!-- <div class="box">
        adwqeawea
        <span class="a"></span>
    </div> -->

    <!-- 单行文本 -->
    <!-- <div class="box1">
        vvvvvvvvvvvvvv
    </div> -->

    <!-- 多行文本 -->
    <!-- <div class="box1">
        vvvvvvvvvvvvvv
        <span>222222222</span>
    </div> -->

    <!-- <div class="box2">
        <span class="b">
            vvvvvvvvvvvvvv
            <br>zzzzzzzzzzzz
        </span>
        <span class="bb"></span>
    </div> -->

    <!-- <div class="box3">
        <img class="img3" src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-100-100.jpg" alt="">
        <span class="assist"></span>
    </div> -->

    <!-- <div class="box4">
        <img class="img4" src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-100-100.jpg" alt="">
    </div> -->

    <!-- <div class="box5">
        <img class="img5" src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-100-100.jpg" alt="">
    </div> -->

    <!-- <div class="box6">
        <p class="p6">
            我是多行文本。多行文本水平垂直居中的原理跟上一页图片的实现是一样的，区别在于要把多行文本所在的容器的display水平转换成和图片一样的，也就是inline-block，以及重置外部继承的text-align和line-height属性值
        </p>
    </div> -->

    <div class="box7">
        <p class="p7 "> 我是多行文本。多行文本水平垂直居中的原理跟上一页图片的实现是一样的，区别在于要把多行文本所在的容器的display水平转换成和图片一样的，也就是inline-block，以及重置外部继承的text-align和line-height属性值
        </p>
    </div>

    <!-- <div class="box8">
        <div>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
        </div>
    </div> -->

</body>

</html>