CSS 如何在 div 中居中文字

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

阅读更多：CSS 教程

使用 text-align:center 居中文本

我们可以使用 CSS 的 text-align 属性来实现居中文本的效果。将文本的父元素的 text-align 属性设置为 center 即可实现文本在水平方向上的居中显示。

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        text-align: center;
    }
</style>
</head>
<body>

<div class="container">
    <p>这是一段居中显示的文本。</p>
</div>

</body>
</html>

在上面的示例中，我们将一个 p 元素放在一个名为 container 的 div 元素内，然后通过设置 container 类的 text-align 属性为 center 来实现文本的居中显示。

使用 line-height 居中单行文本

除了使用 text-align 属性来实现文本的居中显示，我们还可以使用 line-height 属性来实现单行文本的居中显示效果。将 line-height 的值设置为父元素的高度即可。

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        height: 100px;
    }
    .center-text {
        line-height: 100px;
    }
</style>
</head>
<body>

<div class="container">
    <p class="center-text">这是一段居中显示的文本。</p>
</div>

</body>
</html>

在上面的示例中，我们设置了一个高度为 100px 的 container div 元素，并将一个 class 为 center-text 的 p 元素的 line-height 值设置为 100px，从而实现了文本在竖直方向上的居中显示。

使用 flexbox 居中多行文本

如果要居中显示包含多行文本的元素，可以使用 flexbox 布局来实现。

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
    }
</style>
</head>
<body>

<div class="container">
    <p>这是一段包含多行文本的居中显示示例。</p>
</div>

</body>
</html>

上述示例中，我们在 container div 元素上应用了 flexbox 布局，并使用 align-items 和 justify-content 属性来将文本在竖直和水平方向上都居中显示。

总结

通过使用不同的 CSS 属性和技巧，我们可以实现在 div 元素中居中显示文本的效果。text-align 属性适用于水平居中，line-height 属性适用于单行文本的居中显示，而 flexbox 则适用于多行文本的居中显示。根据具体的需求，选择适合的方法来实现居中显示效果即可。希望本文对您有所帮助！