CSS中实现文字居中---笔记

作者：System 时间：2024年08月16日分类：所有,css 字数：634

这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。

在CSS中，实现文字居中可以通过设置text-align属性为center来水平居中，通过设置line-height属性等于容器高度来垂直居中单行文本。对于多行文本的垂直居中，可以使用display: flex和align-items以及justify-content属性。

以下是实现文字水平和垂直居中的不同方法：

水平居中




.center-text {
  text-align: center;
}

垂直居中（单行文本）




.center-text {
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 设置为与容器高度相同 */
}

垂直居中（多行文本）




.center-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，仅当需要水平居中时添加 */
}

在HTML中使用这些类：




<div class="center-text">这是水平垂直居中的文本</div>

对于多行文本，如果仅需要垂直居中，则不需要添加justify-content属性。