cssdiv垂直居中

作者：潮起潮落发布日期:2026-07-17 浏览:91

/* 使用 Flexbox 实现 div 垂直居中 */

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置父容器高度为视口高度 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="parent">
  <div class="child"></div>
</div>

解释说明：

父容器（.parent）:
- display: flex;：将父容器设置为 Flexbox 容器。
- justify-content: center;：使子元素在水平方向上居中对齐。
- align-items: center;：使子元素在垂直方向上居中对齐。
- height: 100vh;：设置父容器的高度为视口高度，确保子元素可以在整个屏幕上居中。
子元素（.child）:
- width: 100px; 和 height: 100px;：定义子元素的宽度和高度。
- background-color: lightblue;：为子元素添加背景颜色以便于观察效果。

上一篇：css 两行省略

下一篇：css滚动条美化