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

在前端开发中，经常会遇到需要将多行文字垂直居中的情况。在CSS中，有多种方式实现此效果。

.parent {
  display: flex;
  align-items: center;
} 

以上代码使用了CSS3中的Flex布局，将父元素的子元素纵向居中对齐。这种方法简单易懂，但需要对Flex布局有一定了解。

.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
  display: inline-block;
} 

此方法使用了table-cell属性，将元素以类似于表格的形式进行布局。在子元素内再添加inline-block属性，可以使子元素按行排列。虽然该方法不需要对Flex布局有深入了解，但是需要注意，父元素和子元素必须为块级元素，也就是在默认情况下，它们需要使用display: block属性。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

这种方法将父元素定位为相对定位，子元素使用绝对定位，并且将其顶部与父元素的中间位置对齐。最后再利用transform属性的位移，让子元素居中。此方法需要注意，若父元素高度不固定，则会使子元素被遮盖。

以上三种方法都可以实现多行文字垂直居中，选择哪种方法取决于开发者的习惯和项目需求。