[分享]css两行以上居中

在CSS中，居中是一项非常基础而也是非常重要的任务，无论是在网页设计还是其他应用场景下，经常需要使用到。居中的方式有很多，今天我们来介绍一种简单而又实用的方法来解决上下或左右两行文字或其他元素的居中问...

在CSS中，居中是一项非常基础而也是非常重要的任务，无论是在网页设计还是其他应用场景下，经常需要使用到。居中的方式有很多，今天我们来介绍一种简单而又实用的方法来解决上下或左右两行文字或其他元素的居中问题。

方法1：使用display和margin实现两行以上文字的居中
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100px;
} 

这个方法非常简单，只需要定义容器的display属性为flex，并设置它的justify-content和align-items属性为center，再设置其flex-direction为column即可实现上下两行文字的居中。这个方法还有一个好处，就是可以支持不同高度的元素居中。

方法2：使用text-align和line-height实现两行以上文字居中
.center {
  text-align: center;
  line-height: 200px;
  height: 200px;
}
.center span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
} 

这个方法比较常用，也比较灵活。首先设置容器的text-align属性为center，再设置line-height和height的值相等，这时候容器里的文字会在容器的中间对齐。但是如果容器里的文字有两行以上的话，就需要更细致的调整了。这时候我们就需要在容器里嵌套一个span元素，给这个元素设置display属性为inline-block，再设置vertical-align属性为middle即可实现两行以上文字的居中。