html字体居中

作者：颠沛流离的伤发布日期:2025-12-10 浏览:59

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 CSS 的 text-align 属性将文本居中对齐 */
        .center-text {
            text-align: center;
        }

        /* 使用 Flexbox 将块级元素内的内容垂直和水平居中 */
        .center-block {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置高度为视口高度的100% */
        }
    </style>
</head>
<body>
    <!-- 简单的文本居中 -->
    <div class="center-text">
        这是一个居中的文本。
    </div>

    <!-- 块级元素内内容的垂直和水平居中 -->
    <div class="center-block">
        <p>这是居中的块级元素内容。</p>
    </div>
</body>
</html>

解释说明：

text-align: center;：这个属性用于将行内元素（如文本）在其父元素中水平居中对齐。适用于简单的文本居中需求。
Flexbox 方法：通过设置 display: flex;，并结合 justify-content: center; 和 align-items: center;，可以实现块级元素内内容的垂直和水平居中。这种方式更灵活，适用于复杂布局。

希望这段代码能帮助你理解如何在 HTML 中实现字体居中。

上一篇：html垂直居中代码

下一篇：htmltable边框线怎么设置