CSS 如何在 div 块中水平垂直居中文字

在本文中，我们将介绍如何使用 CSS 将文本水平和垂直居中在一个 div 块中。这是网页设计中常见的需求之一，通过掌握正确的技巧，可以轻松实现这一效果。

阅读更多：CSS 教程

水平居中

要实现文字在 div 块中水平居中，我们可以使用以下两种方法：

方法一：使用 text-align 属性

我们可以通过设置 div 块的 text-align 属性为 “center” 来实现文字水平居中的效果。例如：

div {
    text-align: center;
}

上面的代码会将 div 块中的所有文本内容都水平居中对齐。

方法二：使用 margin 属性

有时候，我们可能需要只将某个特定的文本水平居中，而不是整个 div 块。这时，我们可以通过设置文本元素的 margin-left 和 margin-right 属性为 “auto” 来实现居中对齐。例如：

p {
    margin-left: auto;
    margin-right: auto;
}

上面的代码会将 p 元素中的文本内容水平居中对齐。

垂直居中

要实现文字在 div 块中垂直居中，我们可以使用以下两种方法：

方法一：使用 line-height 属性

我们可以将 div 块的高度设置为与行高相等，然后将行高设置为与 div 块高度相等，以实现文本的垂直居中。例如：

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

上面的代码会将 div 块中的文本内容垂直居中对齐。

方法二：使用 flexbox 布局

flexbox 布局提供了一种简单而强大的方法来实现文本的垂直居中。我们可以使用以下代码将 div 块中的文本水平和垂直居中：

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

上面的代码会将 div 块中的文本内容水平和垂直居中对齐。

示例

下面是一个示例，演示了如何将文本水平和垂直居中在一个 div 块中：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        <p>居中文本示例</p>
    </div>
</body>
</html>