已设置Flex对齐属性，容器内文本仍无法完美居中的问题求助

开发者阿泽

2026-8-26

文本在Flex容器中无法完美居中的解决方案

这个问题本质是字体基线设计导致的——像"F""d"这类字母的视觉上下边缘和字体行盒的实际边界不匹配，再加上代码里的几个细节错误，才出现了看起来没居中的情况。

代码里的问题点

font-size: 20 缺少单位，浏览器无法识别正确的字体大小
给<h2>设置height:100%会强制拉伸行盒，但字体的垂直对齐默认基于基线而非视觉中心
<h2>标签自带默认上下外边距，会干扰Flex的居中布局

修复方案

清除<h2>的默认外边距
移除<h2>的height:100%设置，让行盒自然适配字体
给<h2>设置line-height等于容器高度（32px），让文本垂直方向贴合容器中心
给font-size补上正确单位（比如px）

修改后的完整代码

.fbubble{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    &.feat {
        width: 25%;
        margin-top: 3em;
        background: $pink;
        height: 32px;
        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 500;
            color: $white;
            line-height: 32px;
            text-align: center; // 确保水平居中，增强兼容性
        }
    }
}