单行文字用line-height最直接，设为与容器height相等即可垂直居中；多行文字用display: flex加align-items: center；注意盒模型（padding/border）影响实际居中区域，vertical-align对块级元素无效。
单行文字用line-height最直接
如果容器高度固定、文字只有一行，line-height设为和容器height相等，就能垂直居中。这是最轻量、兼容性最好的做法，连 IE6 都支持。
常见错误是把line-height设成1或normal——这只会让行高按字体大小计算，跟容器高度无关。
- 容器必须有明确的
height（比如height: 40px） -
line-height: 40px才能生效；写line-height: 100%没用，它相对的是字体大小，不是容器高度 - 多行文字会撑开容器，此时
line-height失效，得换方案
多行文字用display: flex加align-items
Flex 是目前最稳妥的多行文字垂直居中方式，前提是父容器能设为flex且高度可控。
关键点不在justify-content（那是水平居中），而是align-items: center——它控制的是交叉轴上的对齐，对flex-direction: row（默认）来说，交叉轴就是垂直方向。
- 父容器需设置
display: flex和明确高度（height或min-height） - 子元素（文字容器）不用设高度，但建议加
margin: 0清除默认段落间距 - 避免在子元素上误加
vertical-align，它对 flex 子项无效 - IE10+ 支持，IE9 及以下不支持，如需兼容得降级用 table-cell
.box {
display: flex;
align-items: center;
height: 80px;
border: 1px solid #ccc;
}
.box p {
margin: 0;
}
盒模型高度影响flex居中的实际位置
很多人发现用了flex还是偏上或偏下，问题往往出在盒模型：padding、border、margin都会改变内容区可用高度，而align-items: center是对整个flex container的内容区域（content box）中心对齐的。
例如容器height: 100px，但设置了padding: 20px，那真正用来居中的高度只剩60px，文字就会看起来“偏下”。
- 用
box-sizing: border-box让height包含padding和border，减少意外偏差 - 检查是否有隐藏的
margin-top（比如默认外边距），它会把内容整体下推 - 开发者工具里看 computed height 和 content area height 是否一致，不一致就说明盒模型在干扰
不要用vertical-align试图居中块级文字
vertical-align只对inline、inline-block、table-cell元素有效，对普通div或p完全不起作用。强行加了也不会报错，只是默默忽略。
典型误用场景：给一个div设vertical-align: middle，然后纳闷为什么没反应。
- 若坚持用 table 布局，可设父容器
display: table-cell再配vertical-align: middle，但语义差、灵活性低 - 现代项目中，
vertical-align基本只用于图片对齐或表单元格内文本微调 - 遇到“文字贴底”“文字悬空”类问题，优先查
line-height、flex配置、盒模型，别绕到vertical-align
实际项目里，垂直居中看似简单，但最容易卡在盒模型细节和多行/单行混用的边界上。动手前先确认：文字是否换行？容器高度是否严格可控？要不要兼容老浏览器？这几个判断比写代码花的时间还多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
