为什么CSS调整font-size时按钮悬停过渡结束后文字会轻微下移？

问题原因 #

原代码出现文字偏移的核心原因是按钮固定高度下没有明确的内容垂直对齐规则，字体大小变化后默认行高和基线对齐逻辑发生变化，导致文字位置下移。

优先CSS方案 #

方案1：直接修改字体大小无偏移 #

通过flex布局明确按钮内容的对齐规则，完全解决下移问题，文字清晰度不受影响：

.more_about_btn {
  background-color: #3c78d8;
  border: none;
  padding: 5px;
  width: 60%;
  height: 35px;
  box-sizing: border-box; /* 高度包含内边距，避免尺寸计算异常 */
  display: inline-flex;
  align-items: center; /* 内容垂直居中 */
  justify-content: center; /* 内容水平居中 */
  border-radius: 5px;
  color: #fff;
  margin-top: 100px;
  font-size: 18px;
  cursor: pointer;
  transition: all 2s linear;
}

.more_about_btn:hover {
  font-size: 19px;
}

方案2：transform缩放实现更高性能动画 #

用transform缩放文字代替修改font-size，不会触发页面重排，动画流畅度更高，也不会出现偏移问题：

.more_about_btn {
  background-color: #3c78d8;
  border: none;
  padding: 5px;
  width: 60%;
  height: 35px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
  margin-top: 100px;
  font-size: 18px;
  cursor: pointer;
}

.more_about_btn b {
  transition: transform 2s linear;
  transform-origin: center; /* 以中心为原点缩放，避免位置偏移 */
}

.more_about_btn:hover b {
  transform: scale(1.05); /* 缩放比例对应18px到19px的大小变化 */
}

两种方案都可以直接复用原有HTML代码，无需修改结构。

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