html怎么把div盒子居中

作者：城若幻影发布日期:2025-08-03 浏览:86

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用Flexbox布局将div盒子居中 */
        .container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            height: 100vh;           /* 设置容器高度为视口高度 */
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

解释说明：

HTML结构:
- container 是一个外部的容器，用来包裹需要居中的 box。
- box 是实际需要居中的元素。
CSS样式:
- .container 使用了 Flexbox 布局 (display: flex)，并通过 justify-content: center 和 align-items: center 实现水平和垂直居中。
- height: 100vh 确保容器的高度占满整个视口高度，从而使得 box 可以在垂直方向上居中。
- .box 设置了宽度和高度，并添加了一个背景颜色以便于观察效果。

上一篇：html隐藏和显示

下一篇：doctype html怎么解决