padding居中仅适用于单行定高场景，需手动计算上下内边距；flex布局中align-items:center才是响应式垂直居中的稳定方案，且需父容器设display:flex。
用 padding 居中文字：适合单行、定高场景
纯靠 padding 实现垂直居中，本质是“手动算出上下内边距”，只在内容高度固定、容器高度也明确时靠谱。比如按钮、标签这类 UI 元素。
- 如果容器高
40px，文字行高20px，那上下padding各设10px就能居中 - 一旦文字换行、字体缩放、或用户调整字号，
padding值立刻失效——它不响应内容变化 - 移动端 viewport 缩放后，
px值可能被截断，导致视觉偏移
display: flex + align-items: center 是当前最稳解法
Flex 布局真正解决的是“基于内容自动对齐”，不是靠猜数字。只要父容器设了 display: flex，子元素一行文字就能自然垂直居中，且兼容所有现代浏览器（包括 iOS Safari 9+ 和 Chrome 29+）。
- 必须给父盒子加
display: flex，仅对子元素设align-items没用 - 如果文字是块级（比如
<p></p>），默认会占满整行；若想水平也居中，顺手加个justify-content: center - 注意不要和
vertical-align混用——后者只对 inline/inline-block 元素生效，跟 flex 无关
.box {
display: flex;
align-items: center;
height: 60px;
}
.box span {
/* 不需要设置 line-height 或 padding */
}
别踩 line-height = height 这个老坑
这是很多老项目还在用的“取巧”方式：让行高和容器高度一致，靠行内框居中来带文字。表面看没问题，但一遇到多行、em/rem 字体、或加粗字体，立刻错位。
-
line-height控制的是行框（line box）高度，不是文字本身的位置；字形实际基线仍可能浮动 - 当文字内容变多、触发换行，整个
line-height规则就彻底失效 - 在使用
font-feature-settings或可变字体时，基线行为更不可预测
复杂点其实在“最小高度”和“内容溢出”的处理上
真正容易翻车的不是居中本身，而是当内容动态加载、文字长度不可控、或容器高度随视口变化时，flex 的默认行为是否符合预期。
- 如果父容器没设
height或min-height，align-items: center会把文字贴在“内容高度”的中间，看起来像没居中 - 文字超长换行后，
flex依然居中，但可能造成顶部留白过大；这时得配合max-height和overflow: hidden或text-overflow: ellipsis - 服务端渲染（SSR）页面首次加载时，若 JS 还没接管，flex 布局可能因 CSS 加载延迟而闪动——确保关键样式内联或提前加载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
