html垂直居中代码

作者：无声飞雪发布日期:2025-11-25 浏览:15

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

        .centered {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="centered">
            我是垂直居中的内容
        </div>
    </div>
</body>
</html>

解释说明：

HTML结构：包含一个外部的<div>容器（container）和一个内部的<div>元素（centered）。container用于设置布局，centered是实际要居中的内容。
CSS样式：
- display: flex;：将container设置为弹性盒子容器。
- justify-content: center;：使子元素在水平方向上居中对齐。
- align-items: center;：使子元素在垂直方向上居中对齐。
- height: 100vh;：设置container的高度为视口高度的100%，确保其占满整个屏幕高度。
- width 和 height：设置centered的具体宽度和高度，并给它一个背景色以便于观察效果。

上一篇：html select设置选中项

下一篇：html文字加粗