css flex布局实现文字垂直居中

置顶一只月月鸟呀

已于 2023-08-15 10:31:02 修改

阅读量1.2w

点赞数 14

分类专栏： # CSS 文章标签： css flex html 脚本语言

于 2021-01-05 10:23:05 首次发布

本文链接：https://blog.csdn.net/m0_46149348/article/details/112215225

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在没使用flex之前，垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度，但这种方法很生硬，每次需要更改容器高度的时候都需要考虑line-height，使用以下这种方法可以实现自适应的垂直居中！

<style>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    .innner {
        display: flex;
        background-color: #ea4d22;
        height: 100px;
        /* line-height: 100px; */
        /* text-align: center; */
        justify-content: center;
        flex-direction: column;
    }
    .innner2 {
        background-color: #20e64b;
        height: 100px;
        text-align: center;
    }
    .innner3 {
        display: flex;
        background-color: #18a0c2;
        height: 100px;
        /* line-height: 100px; */
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }


</style>
<div class="innner">垂直居中示例</div>
<div class="innner2">水平居中示例</div>
<div class="innner3">垂直水平居中示例</div>

</body>
</html>

在这里插入图片描述

一只月月鸟呀

关注

14
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
2
评论
css flex布局实现文字垂直居中

<style> .innner { display: flex; background-color: #ea4d22; height: 100px; /* line-height: 100px; */ /* text-align: center; */ justify-content: center; flex-direction: column; } .i.
复制链接

扫一扫