css 文字居中

作者：看破了搪塞发布日期:2025-09-18 浏览:88

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

.text {
  text-align: center;      /* 文字水平居中 */
}

解释说明：

.container 是一个容器，使用了 flexbox 布局。通过 justify-content: center 和 align-items: center，可以将子元素（即文字）在水平和垂直方向上都居中。
height: 100vh 设置容器的高度为视口高度的 100%，确保垂直居中有足够的空间。
.text 中的 text-align: center 确保文字本身在行内水平居中。

如果你需要进一步调整或有其他需求，请告诉我！

上一篇：css设置滚动条样式

下一篇：css注释