div内文本垂直居中偏移问题，CSS与Bootstrap方案均无法解决

问题根因 #

偏移由两个因素共同导致：

• Bootstrap默认样式给<h3>标签预置了上下外边距，打破了flex布局的垂直居中计算逻辑
• 1.5rem的字体大小对应的默认行高和40px的容器高度未匹配，也会带来细微的视觉偏移

修复方案 #

方式1：纯CSS修复 #

直接重置.code-text的默认外边距即可让align-items: center正常生效，也可额外设置行高和容器高度一致，适配特殊字体场景：

.code-text {
  font-size: 1.5rem;
  color: #3BBA9C;
  margin: 0; /* 清除h3默认上下边距 */
  line-height: 40px; /* 和父容器高度保持一致，可选配置 */
}

方式2：用Bootstrap工具类修复 #

不需要修改CSS代码，直接给h3标签加Bootstrap自带的m-0类清除默认边距即可：

<h3 class="code-text m-0">This is my text</h3>

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