如何在表格单元格中居中显示箭头？

要让伪元素实现的箭头在单元格内居中，不需要用绝对定位手动调整位置，只需要调整箭头容器和伪元素的布局即可，以下是最优方案：

修改后的CSS代码 #

.w5 {
  width: 5%;
}

.w30 {
  width: 30%;
}

.positive-arrow, .negative-arrow {
  /* 让容器占满单元格宽度，并启用flex居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 1em; /* 保证容器高度，避免箭头偏移 */
}

.positive-arrow:before {
  content: "";
  border-style: solid;
  border-width: 5px 5px;
  border-color: transparent transparent #0dff00 transparent;
}

.negative-arrow:before {
  content: "";
  border-style: solid;
  border-width: 5px 5px;
  border-color: #f00 transparent transparent transparent;
}

方案说明 #

1. 给箭头的容器（.positive-arrow/.negative-arrow）设置width:100%，让它完全填充所在的单元格宽度，摆脱父元素text-end的对齐限制。
2. 使用Flex布局的justify-content:center和align-items:center，确保伪元素箭头在容器内水平、垂直双向居中，这种方式适配任何单元格宽度，不需要手动计算位置。
3. 添加min-height:1em保证容器有足够高度，让箭头和单元格内的文字垂直对齐更协调。

效果验证 #

无需修改任何HTML代码，替换上述CSS后，所有单元格内的箭头都会自动居中，且不会随单元格宽度变化而偏移。

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