Flex布局垂直居中是现代开发首选方案，需父容器设明确高度（如height: 300px或100vh）并启用display: flex和align-items: center，子元素无需额外样式即可居中。
直接用 display: flex + align-items: center 就能解决绝大多数上下居中需求，但前提是父容器有明确高度，且子元素不是行内元素单独依赖 vertical-align。
父容器用 Flex 实现垂直居中（最推荐）
这是现代开发中稳定、语义清晰、兼容性足够（IE11+）的首选方案。关键点不在子元素上，而在父容器的设置。
- 父容器必须有可计算的高度，比如
height: 300px或height: 100vh；仅靠min-height不足以触发align-items: center的垂直居中效果 - 子元素无需设
margin、position或line-height，哪怕它是div、img或button都能对齐 - 如果父容器里有多个子元素，
align-items: center会让它们全部在交叉轴（默认为垂直方向）上居中对齐，不是“整体居中”，而是“每个都居中” - 常见错误：忘了给
html和body设height: 100%，导致100vh生效但父div高度塌陷
单行文本用 line-height 居中（轻量但局限）
只适用于**单行、高度固定的容器内纯文本**，原理是让文本行高和容器高度一致，靠行框垂直居中实现视觉居中。
- 容器需有明确
height，且不能换行（white-space: nowrap更保险） -
line-height值必须等于容器height，例如height: 40px; line-height: 40px; - 一旦内容变成两行，或加了
padding/border，就会错位；也不适用于图片或块级子元素 - 优点是零布局开销，适合按钮文字、标签栏等固定尺寸小控件
绝对定位 + transform（精确但要小心）
当无法改动父容器显示模式（比如它已经是 position: relative 但不能加 flex），这个方案能强行居中，但会脱离文档流。
- 子元素需设
position: absolute，父容器要有position: relative或更高层级定位上下文 - 必须同时写
top: 50%和transform: translateY(-50%)，只写前者会导致顶部对齐到中心线 - 如果还要水平居中，补上
left: 50%和transform: translate(-50%, -50%) - 问题：屏幕缩放时可能微偏移；无障碍工具可能忽略脱离流的元素；父容器高度变化时需 JS 重算（除非用 CSS 自适应）
label 和 input 垂直对齐不是“label 居中”问题
很多人搜“label 上下居中”，实际是想让 和旁边的 视觉对齐——这不是 label 自身居中，而是两者基线（baseline）不一致造成的错位。
- 默认情况下，
label是inline，input是inline-block，它们按 baseline 对齐，input 看起来偏低 - 最简解法：给
input加vertical-align: middle或vertical-align: top - 更健壮的做法：把
label和input包进一个display: flex容器，用align-items: center - 别试图给
label单独设line-height或padding去“凑”，容易在不同字体/浏览器下失准
真正难的不是选哪种方法，而是分清你要居中的到底是什么：是容器里的块？是某一行字？还是表单控件之间的视觉关系？搞错对象，再对的 CSS 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
