html文字居中

作者：冰残°零度伤发布日期:2026-07-20 浏览:126

<!DOCTYPE html>
<html>
<head>
    <title>HTML文字居中示例</title>
    <style>
        /* 使用CSS将文字居中 */
        .center-text {
            text-align: center;  /* 水平居中 */
            height: 100vh;       /* 设置高度为视口高度 */
            display: flex;       /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div class="center-text">
        这是居中的文字
    </div>
</body>
</html>

解释说明：

text-align: center;：使文本水平居中。
height: 100vh;：设置容器的高度为视口高度，确保内容可以在整个屏幕上垂直居中。
display: flex;：使用Flexbox布局，可以轻松实现子元素的水平和垂直居中。
align-items: center; 和 justify-content: center;：分别用于垂直和水平居中。

上一篇：html超链接

下一篇：html 颜色