css文本垂直居中

作者：孤独的角落发布日期:2025-08-15 浏览:70

/* 示例代码：使用 Flexbox 实现文本垂直居中 */

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

.text {
  /* 文本样式 */
}

<!-- HTML 结构 -->
<div class="container">
  <div class="text">我是垂直居中的文本</div>
</div>

解释说明：

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

上一篇：css animation 循环播放

下一篇：css ::after