html文字垂直居中

作者：潮起潮落发布日期:2026-04-14 浏览:59

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 Flexbox 实现文字垂直居中 */
        .container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            height: 300px;           /* 设置容器高度 */
            border: 1px solid black; /* 可视化容器边界 */
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是垂直居中的文字</p>
    </div>
</body>
</html>

解释说明：

.container 是一个包含文字的容器。
display: flex; 启用了 Flexbox 布局，使得子元素可以根据 Flexbox 的规则进行排列。
justify-content: center; 使子元素在水平方向上居中对齐。
align-items: center; 使子元素在垂直方向上居中对齐。
height: 300px; 设置了容器的高度，确保有足够空间来展示垂直居中的效果。
border: 1px solid black; 添加了一个边框，方便观察容器的实际大小和位置。

上一篇：html标签表示网页正文开始的是

下一篇：html字体加粗代码