如何使 div 中的文本居中 - CSS

在前端开发中，我们经常需要对文本进行居中对齐。本文将为您介绍如何通过 CSS 将 div 中的文本居中。

1. 使用text-align属性

text-align 是 CSS 中的一个属性，可以设置文字的水平对齐方式。如果想要让 div 中的文本居中，只需将 text-align 设置为 center 即可。

div {
    text-align: center;
}

2. 使用line-height和height属性

line-height 属性可以设置行高，height 属性可以设置元素的高度。如果将它们设置为相同的值，则文本将在中间垂直居中。

div {
    height: 50px;
    line-height: 50px;
}

3. 使用display:flex布局

使用 flex 布局可以轻松实现各种排列方式，包括文本居中。只需将 display 设置为 flex，并将 justify-content 和 align-items 设置为 center。

div {
    display: flex;
    justify-content: center;
    align-items: center;
}

以上是三种比较常用的实现方式，通过这些 CSS 属性设置，可以在 div 中实现文字的水平或垂直居中。

总结

• text-align：设置文本水平对齐方式。
• line-height和height：设置文本垂直居中方式。
• display:flex：设置项的容器为flex，从而实现各种排列方式。

在实际开发中，可以根据需求选择合适的方式来实现文本居中。