cssdiv居中

作者：◇梦◆饭饭发布日期:2025-12-14 浏览:41

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

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

解释说明：

display: flex;：将容器设置为弹性布局，使得子元素可以使用 justify-content 和 align-items 进行对齐。
justify-content: center;：使子元素在水平方向上居中。
align-items: center;：使子元素在垂直方向上居中。
height: 100vh;：设置容器的高度为视口高度的100%，确保整个页面的高度都被利用，从而实现垂直居中。

上一篇：css 滚动

下一篇：css滚动条