CSS专题梳理之（块级行内级）水平垂直居中的多种方式

最新推荐文章于 2023-02-13 10:53:40 发布

qq_39125445

最新推荐文章于 2023-02-13 10:53:40 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_39125445/article/details/88720593

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

设置块级元素长宽水平，垂直居中

1.使用relative，absolute脱离文档流

2.使用绝对定位后，各方向初始化为0，margin为auto就可以执行。

块级元素和行内元素水平，垂直居中

1.使用flex布局都可以使用

2.使用relative,css中transform

专门的块级元素水平居中：

margin：0 auto；

专门的行级元素水平，垂直居中：

使用text-align:center水平居中

必须使用height高度，line-height单行文本可以垂直。

多行文本的行级元素，可以变化的字数排数

场景，后端传来的标题或者其他的内容，可能是一排，也可能是两排，但是都要他垂直居中

 <style>
        .main:after {
            content: "";
            height: 600px;
            width: 100px;
            display: inline-block;
            background-color: black;
            vertical-align: middle;
        }

        .item1 {
            width: 100px;
            height: 200px;
            background-color: red;
            display: inline-block;
            vertical-align: middle;
        }

        .item2 {
            width: 100px;
            height: 400px;
            background-color: blue;
            display: inline-block;
            vertical-align: middle;
        }

        .item3 {
            width: 100px;
            height: 200px;
            background-color: yellow;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>

效果：

原理：因为都是按照水平基线vertical来布局，那么都将水平基线设置为middle，那么多个内容水平基线都相同，设置伪类高度为外层高度。

qq_39125445

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS专题梳理之（块级行内级）水平垂直居中的多种方式

设置块级元素长宽水平，垂直居中1.使用relative，absolute脱离文档流2.使用绝对定位后，各方向初始化为0，margin为auto就可以执行。块级元素和行内元素水平，垂直居中1.使用flex布局都可以使用2.使用relative,css中transform专门的块级元素水平居中：margin：0 auto；专门的行级元素水平，垂直居中：...
复制链接

扫一扫