html居中代码

作者：殘月殺手发布日期:2025-05-20 浏览:39

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用Flexbox实现居中 */
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置高度为视口高度 */
        }
    </style>
</head>
<body>
    <div class="center">
        <p>这是居中的内容</p>
    </div>
</body>
</html>

解释说明：

display: flex;：将容器设置为Flexbox布局，允许子元素使用Flexbox属性进行排列。
justify-content: center;：水平居中对齐子元素。
align-items: center;：垂直居中对齐子元素。
height: 100vh;：设置容器的高度为视口高度的100%，确保在页面上能够看到居中效果。

上一篇：html表格

下一篇：html radio