div-文字水平垂直居中

我先来一碗

于 2022-05-16 14:53:36 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/jack_bob/article/details/124799754

vue 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何使用CSS将文字在<div>元素内实现水平垂直居中。通过设置display为flex，并结合justify-content和align-items属性，可以轻松达成此效果。示例代码中展示了具体的样式和模板，显示了一个简单的列表标题居中的应用场景。

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

文字水平垂直居中：
css：

.board-colum-header{
        display: flex;
        justify-content: center;
        align-items: center;
    }

<template>
    <div class="kanban-bg">
        <!-- 列表标题 -->
        <div class="board-colum-header">
            {{'列表标题'}}
        </div>
    </div>
</template>

展示效果：
在这里插入图片描述