css flex 垂直居中

作者：堕魂灭天发布日期:2025-10-27 浏览:68

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

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

.item {
  /* 这里可以添加子元素的样式 */
}

<div class="container">
  <div class="item">垂直居中的内容</div>
</div>

解释说明：

.container 是父级容器，通过 display: flex 将其转换为 Flex 容器。
justify-content: center 使子元素在水平方向上居中对齐。
align-items: center 使子元素在垂直方向上居中对齐。
height: 100vh 设置容器的高度为视口高度，确保容器有足够的高度来进行垂直居中。

上一篇：css线性渐变

下一篇：css3 动画