css中使文字在盒子中垂直居中的两种方式

在CSS中，可以使用以下两种方法使文字在盒子中垂直居中：

1. 使用 display: flex; 方法：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如需要的话 */
  height: 100px; /* 或者其他高度 */
}
 
.text {
  /* 如果需要水平居中，可以在文字上应用justify-content */
}

<div class="container">
  <div class="text">垂直居中文字</div>
</div>

2. 使用 display: table-cell; 方法：

.container {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中，如需要的话 */
  height: 100px; /* 或者其他高度 */
}
 
.text {
  /* 如果需要水平居中，可以在文字上应用text-align */
}

<div class="container">
  <div class="text">垂直居中文字</div>
</div>

两种方法都可以实现文本的垂直居中，第一种是现代布局技术，第二种是较旧的技术，但在某些情况下仍可使用。根据项目需求和浏览器兼容性选择合适的方法。