html居中

作者：菠蘿。d海发布日期:2025-08-01 浏览:91

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 Flexbox 实现水平和垂直居中 */
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置高度为视口高度的100% */
        }
    </style>
</head>
<body>
    <div class="center">
        <p>这是一个居中的文本。</p>
    </div>
</body>
</html>

解释说明：

display: flex;：将容器设置为弹性盒模型（Flexbox），以便可以使用 justify-content 和 align-items 属性。
justify-content: center;：使子元素在主轴（水平方向）上居中对齐。
align-items: center;：使子元素在交叉轴（垂直方向）上居中对齐。
height: 100vh;：设置容器的高度为视口高度的100%，确保内容可以在整个屏幕上居中。

上一篇：html 分割线

下一篇：轮播图怎么制作html