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

最新推荐文章于 2024-07-19 14:29:49 发布

今夜你是我的模特

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量2.4k

点赞数 1

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

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

版权

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

摘要由CSDN通过智能技术生成

垂直居中总方法分为：
一、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: