[分享]css中实现多行文字居中

在网页设计中，文字通常会占据页面中很大一部分的空间。在许多情况下，我们需要将多行文字居中，以便更好地布局页面。在CSS中，有几种方法可以实现多行文字的居中操作。/ 方法一：使用display属性和te...

在网页设计中，文字通常会占据页面中很大一部分的空间。在许多情况下，我们需要将多行文字居中，以便更好地布局页面。在CSS中，有几种方法可以实现多行文字的居中操作。

/* 方法一：使用display属性和text-align属性 */
.text-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 方法二：使用line-height属性和vertical-align属性 */
.text-middle {
  height: 200px;
  line-height: 200px;
  text-align: center;
  vertical-align: middle;
} 

方法一使用了display属性中的flex值，将父元素设为flex容器，并使用justify-content属性和align-items属性来在水平和垂直方向上居中子元素。同时，我们使用text-align属性来将子元素内的文字居中。

方法二使用了line-height属性和vertical-align属性，将文本行高设为与父元素高度相等，并使用vertical-align属性将文本垂直居中。值得注意的是，方法二需要将父元素高度设为固定值才可以生效。