css文字水平居中

作者：风外听竹发布日期:2026-01-05 浏览:101

/* 通过设置块级元素的文本居中 */
.container {
  text-align: center; /* 设置容器内的文本水平居中 */
}

/* 如果是行内元素或需要更精确的控制，可以使用以下方法 */
.centered-text {
  display: flex; /* 使用flexbox布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐（如果需要） */
  height: 100vh; /* 设置高度为视口高度 */
}

解释说明：

text-align: center;：适用于块级元素（如<div>、<p>等），可以让其内部的文本或行内元素水平居中。
display: flex; justify-content: center;：适用于更复杂的布局需求，特别是当需要对行内元素或块级元素进行居中时。justify-content: center;确保内容在水平方向上居中。

上一篇：css显示滚动条

下一篇：css响应式布局