数据网格中如何实现固定高度文本行内的文本垂直居中？

需求：在数据网格中，单元格内的每行文本固定高度为34px，需要让文本在自身所在的文本行内垂直居中，而非在整个单元格高度范围内居中，避免同行单元格行数不同时（比如一个2行、一个1行）出现对齐错位的问题。

解决方案 #

给承载单行文本的.text元素添加垂直居中样式，推荐使用Flex布局，能稳定实现元素内内容的垂直居中，兼容多种文本场景：

.container {
  width: 100%;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

.text {
  height: 34px;
  border: 1px solid red;
  /* 添加以下两行实现文本垂直居中 */
  display: flex;
  align-items: center;
}

.cell {
  padding: 3px;
  border: 1px solid black;
}

.line1 {
  display: flex;
  width: 100%;
}

对应的HTML结构保持不变：

<div class="container">
  <div class="line1">
    <div class="cell">
      <div class="text">
        Text 1
      </div>
      <div class="text">
        Text 2
      </div>
    </div>
    <div class="cell">
      <div class="text">
        Text 2
      </div>
    </div>
  </div>
</div>

说明 #

• 通过给.text设置display: flex和align-items: center，让文本在34px高度的行内垂直居中，不管单元格内有多少行文本，每行的文本都会保持自身行内的对齐，不会因为单元格整体高度变化而错位。
• 也可以使用line-height: 34px实现，但如果文本出现换行（虽需求为单行，可作备选方案），Flex布局的方式会更稳定，不会出现行高叠加的问题。

内容的提问来源于stack exchange，提问作者user8336738