使用border-radius设置圆形边框后如何让内部文字精准居中？

问题原因 #

原有代码使用line-height与容器高度相等的方式实现垂直居中，受字体自带的上下留白、基线偏移特性影响，仅能在特定字体场景下近似居中，无法做到全场景精准对齐。

最优修正方案（Flex布局，兼容性好） #

CSS代码修改如下，HTML代码无需调整：

.circle_container {
  width: 80px;
  height: 80px;
  border: 1px solid red;
  border-radius: 50%;
  /* 新增Flex布局属性实现双向居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 可选补充：避免边框撑大容器尺寸 */
  box-sizing: border-box;
}

可选简化方案（Grid布局，写法更简洁） #

如果项目兼容CSS Grid，可使用更短的代码实现相同效果：

.circle_container {
  width: 80px;
  height: 80px;
  border: 1px solid red;
  border-radius: 50%;
  display: grid;
  place-content: center;
  box-sizing: border-box;
}

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