css文字怎么居中在正中间

作者：苏染瞳° 发布日期:2025-05-29 浏览:142

/* 使用 Flexbox 实现文字在容器中水平和垂直居中 */

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

.text {
  text-align: center;      /* 确保文字内容居中对齐 */
}

<div class="container">
  <div class="text">居中的文字</div>
</div>

解释说明：

Flexbox 布局：通过 display: flex 将 .container 设置为一个弹性盒子容器。
水平居中：justify-content: center 使子元素（.text）在主轴（水平方向）上居中。
垂直居中：align-items: center 使子元素在交叉轴（垂直方向）上居中。
容器高度：height: 100vh 设置容器的高度为视口的 100%，确保文字可以在整个页面高度内居中。
文本对齐：text-align: center 确保文字内容本身也是居中对齐的。

上一篇：css把边框变成圆弧形状

下一篇：css文字垂直居中对齐