CSS字体居中的方法有哪些？-菜鸟科技网

在CSS中实现字体居中是网页布局中的常见需求,根据不同的场景和布局方式，有多种方法可以实现文本的水平居中、垂直居中或同时居中，以下将从不同布局场景出发，详细解析各种居中方法及其适用场景。

（图片来源网络，侵删）

水平居中方法

文本居中（适用于块级元素内的文本）
对于块级元素（如<p>、<div>）内的文本，使用text-align: center是最直接的方式，该属性会使其所有行内内容（包括文本、图片等）在元素内水平居中。
```
.center-text {
    text-align: center;
}
```
块级元素水平居中（固定宽度元素）
若需将固定宽度的块级元素（如<div>）在其父容器中水平居中，可设置margin: 0 auto，通过左右外边距自动分配，使元素居中。
```
.center-block {
    width: 200px;
    margin: 0 auto;
}
```
Flexbox实现水平居中
使用Flex布局可轻松实现居中，将父容器设为display: flex，并通过justify-content: center使子元素水平居中。
```
.flex-container {
    display: flex;
    justify-content: center;
}
```
Grid布局实现水平居中
Grid布局同样支持居中，通过display: grid和justify-items: center或justify-content: center实现。
（图片来源网络，侵删）
```
.grid-container {
    display: grid;
    justify-content: center;
}
```

单行文本垂直居中
若元素高度固定且仅包含单行文本，可通过设置line-height等于height实现垂直居中。
```
.single-line-center {
    height: 50px;
    line-height: 50px;
}
```
Flexbox实现垂直居中
Flex布局的align-items: center属性可使子元素在交叉轴（垂直方向）居中。
```
.flex-vertical-center {
    display: flex;
    align-items: center;
}
```
Grid布局实现垂直居中
Grid布局中，align-items: center或place-items: center可实现垂直居中。
```
.grid-vertical-center {
    display: grid;
    align-items: center;
}
```
绝对定位+transform居中
对于已知尺寸的元素，可通过绝对定位结合transform: translateY(-50%)实现垂直居中。
（图片来源网络，侵删）
```
.absolute-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```

Flexbox完全居中
结合justify-content: center和align-items: center，可同时实现水平和垂直居中。
```
.flex-full-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
```
Grid完全居中
Grid布局中，place-items: center或分别设置justify-content和align-items为center。
```
.grid-full-center {
    display: grid;
    place-items: center;
}
```
绝对定位+transform完全居中
通过绝对定位将元素置于父容器中心，并用transform: translate(-50%, -50%)调整位置。
```
.absolute-full-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
```