文字居中css

/* 使用 CSS 实现文字居中 */

/* 方法一：使用 text-align 居中（适用于单行或多行文本） */
.text-center {
    text-align: center; /* 水平居中 */
}

/* 方法二：使用 flexbox 居中（适用于块级元素中的文本） */
.flex-center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

/* 方法三：使用 grid 居中（适用于块级元素中的文本） */
.grid-center {
    display: grid;
    place-items: center; /* 同时水平和垂直居中 */
}

解释说明：

1. text-align: center;：适用于单行或多行文本的水平居中。它会使文本在其容器内水平居中对齐。
2. flexbox：通过 display: flex; 和 justify-content: center; 可以实现水平居中，而 align-items: center; 则可以实现垂直居中。这种方法适合用于块级元素中的文本。
3. grid：通过 display: grid; 和 place-items: center; 可以同时实现水平和垂直居中，适合用于块级元素中的文本。

你可以根据具体的需求选择合适的方法。