html 垂直居中

作者：冷宸枫发布日期:2026-01-17 浏览:51

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 容器样式 */
        .container {
            height: 100vh; /* 设置容器高度为视口高度 */
            display: flex; /* 使用Flexbox布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中（可选） */
            text-align: center; /* 文本居中对齐 */
        }

        /* 内容样式 */
        .content {
            padding: 20px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <p>这是垂直居中的内容。</p>
        </div>
    </div>
</body>
</html>

解释说明：

容器 (container)：我们使用了 display: flex 来启用 Flexbox 布局，并通过 align-items: center 实现垂直居中。同时，justify-content: center 可以实现水平居中（根据需要可以去掉）。
内容 (content)：这部分是你要居中的实际内容，可以通过设置背景颜色、内边距等属性来美化显示效果。

这种方式简单且兼容性较好，适用于大多数现代浏览器。

上一篇：html document

下一篇：html footer