div文字居中方法

wangyuntuan

于 2023-01-02 14:59:08 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/wangyuntuan/article/details/128520982

css 专栏收录该内容

8 篇文章

订阅专栏

该文章介绍了如何使用CSS的Flexbox属性来实现元素的垂直居中、水平居中以及同时水平垂直居中的方法，提供了相应的样式代码示例。

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

1、上下居中（垂直居中）

style="height: 28px;
       display: flex;
       flex-direction: row;
       align-items: center;"

2、左右居中（水平居中）

style="height: 28px;
       display: flex;
       flex-direction: row;
       justify-content: center;"

3、左右居中（水平居中）

style="display: flex;
       flex-direction: column;
       align-items: center;"

4、居中（水平、垂直居中）

style="height: 28px;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       background: #b2b2c5;
       border-radius: 2px"

效果预览：