如何仅用CSS让<th>单元格内的"X"垂直居中？

原代码中使用float会让元素脱离文档流，导致vertical-align: middle无法生效，以下两种方案可解决问题，且无需修改HTML结构：

方案一：Flex布局（推荐，适配现代浏览器） #

修改后的CSS代码：

.headerCell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
}

.headerX {
  border: 1px solid blue;
}

• display: flex将单元格转为Flex容器，align-items: center直接让所有子元素垂直居中。
• justify-content: space-between替代原浮动效果，使文本靠左、"X"靠右分布，同时元素保持在文档流内。

方案二：绝对定位（兼容旧浏览器） #

修改后的CSS代码：

.headerCell {
  position: relative;
  height: 90px;
  width: 200px;
  border: 1px solid red;
}

.headerText {
  border: 1px solid blue;
  width: 150px;
  float: left;
}

.headerX {
  border: 1px solid blue;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

• 给单元格设置position: relative，作为绝对定位的参考容器。
• top: 50%让"X"的顶部对齐容器垂直中点，transform: translateY(-50%)将元素向上偏移自身高度的一半，实现精确垂直居中。

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