css让文字水平垂直居中

最新推荐文章于 2025-09-23 09:25:36 发布

原创最新推荐文章于 2025-09-23 09:25:36 发布 · 891 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文总结了三种常见的CSS布局技巧，用于实现文字的水平垂直居中显示，包括使用text-align和line-height、flex布局以及table-cell方法。文章还提到了各种方法的注意事项，如避免在使用table-cell方法时将元素设为绝对定位，以及使用flex布局时的兼容性问题。

今天面试被问到了，没答上来，真是太菜了，总结一下吧，下面是我知道的三种:

<div class="center">文字水平垂直居中</div>

1. text-align + line-height

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    line-height: 80px;
}

2. flex + justift-content + align-items

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

3. table-cell + vertical-align + text-align

.center{
    width: 200px;
    height: 80px;
    border:1px solid black;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}