htmldiv居中代码

作者：鱼宝宝睡觉觉发布日期:2025-03-23 浏览:47

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

        .inner-div {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="center-div">
        <div class="inner-div">
            <!-- 这里可以放置内容 -->
        </div>
    </div>
</body>
</html>

解释说明：

display: flex;：将父级元素设置为 Flexbox 容器。
justify-content: center;：使子元素在水平方向上居中对齐。
align-items: center;：使子元素在垂直方向上居中对齐。
height: 100vh;：设置父级元素的高度为视口高度的 100%，确保垂直居中有足够的空间。

通过这种方式，.inner-div 将在其父容器 .center-div 中水平和垂直居中显示。

上一篇：html怎么加图片

下一篇：html水平居中代码怎么写