CSS 如何在 div 中居中文字

在本文中，我们将介绍如何使用CSS将文本居中显示在一个 div 元素中。

使用CSS将文字水平居中显示的方法有几种，取决于你想要实现的效果和情况。下面我们将分别介绍这些方法。

阅读更多：CSS 教程

1. 使用 text-align 属性

其中一种简单的方法是使用 text-align 属性。通过将 text-align 设置为 “center”，可以将文字在 div 中水平居中显示。

.div {
  text-align: center;
}

这种方法适用于将行内元素和块级元素的内容居中，但要记住，它的作用范围是文本的对齐方式，而不是元素本身。

2. 使用 line-height 和 height 属性

若要将文字在 div 中垂直居中显示，我们可以通过设置 line-height 和 height 的值相等来实现。

.div {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

这种方法适用于单行文本，因为如果文本超过一行，其行高可能会导致显示不正常。

3. 使用 flexbox 布局

flexbox 布局提供了一种简单而强大的方法来实现居中文本。通过将 display 设置为 “flex” 并使用 justify-content 和 align-items 属性，可以在 div 中同时实现水平和垂直居中。

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

这将使 div 中的文本在水平和垂直方向上同时居中。与前两种方法相比，使用 flexbox 布局可以更好地处理多行文本的居中显示。

4. 使用 absolute 和 transform 属性

如果你希望将文本在 div 中完全居中，包括在水平和垂直方向上都居中，你可以使用 absolute 定位和 transform 属性。

.div {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这种方法中，我们使用了绝对定位将文本的位置相对于其父元素进行定位。然后，通过将 top 和 left 的值设置为 50% ，以及使用 transform 属性来将文本向左上角移动其自身的 50%，就可以将文本在 div 中完全居中。

请注意，为了使此方法起作用，div 元素应该具有相对定位。

总结

本文介绍了几种常用的方法如何使用 CSS 将文本居中显示在一个 div 元素中。这些方法包括使用 text-align、line-height 和 height 属性，flexbox 布局，以及 absolute 定位和 transform 属性。根据你的需求和特定的情况，选择适合的方法来实现文本的居中显示。通过合理运用这些方法，你可以轻松实现各种形式的文本居中效果。