css 字体居中

作者：孤独的角落发布日期:2026-03-10 浏览:33

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

.text {
  font-size: 24px;
}

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

解释说明：

.container 类使用了 flexbox 布局，通过 justify-content: center 和 align-items: center 实现了水平和垂直方向的居中。
height: 100vh 设置容器的高度为视口高度，确保内容在页面中垂直居中。
.text 类用于设置文本的样式，如字体大小等。

上一篇：css文字

下一篇：css 三角