css设置div整体居中

作者：Alexandr嫁衣° 发布日期:2026-02-24 浏览:96

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置一个容器，使其中的div居中 */
        .center-div {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            height: 100vh;           /* 设置容器高度为视口高度 */
        }

        .inner-div {
            width: 200px;            /* 内部div的宽度 */
            height: 200px;           /* 内部div的高度 */
            background-color: lightblue; /* 内部div的背景颜色 */
        }
    </style>
</head>
<body>
    <!-- 容器div -->
    <div class="center-div">
        <!-- 需要居中的内部div -->
        <div class="inner-div"></div>
    </div>
</body>
</html>

解释说明：

display: flex;：将容器设置为弹性盒子布局。
justify-content: center;：使子元素在主轴（水平方向）上居中对齐。
align-items: center;：使子元素在交叉轴（垂直方向）上居中对齐。
height: 100vh;：设置容器的高度为视口高度的100%，确保垂直居中有足够的空间。

上一篇：css div 居中

下一篇：css显示滚动条