css div 居中

作者：让固执流亡丶发布日期:2026-02-18 浏览:14

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

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

解释说明：

display: flex;：将容器设置为 Flexbox 布局。
justify-content: center;：使子元素在主轴（水平方向）上居中对齐。
align-items: center;：使子元素在交叉轴（垂直方向）上居中对齐。
height: 100vh;：设置容器的高度为视口高度的 100%，确保整个页面的高度都被利用，从而使子元素在垂直方向上居中。

上一篇：css多个class共用写法

下一篇：css设置div整体居中