最可靠做法是用flex布局：父div设display: flex、justify-content: center和align-items: center，label保持inline默认；需注意父容器要有确定高度，避免line-height等旧方案在多行、换行或跨平台时失效。
label 在 div 中居中，不是靠“让它自己居中”，而是靠控制它所在的容器（div）的布局行为。最可靠、现代且语义清晰的做法是用 flex 布局，而不是调 line-height 或 text-align 单独处理。
用 display: flex 让 label 在 div 中水平+垂直居中
这是目前最通用、兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+/Edge 12+）、不易出错的方式：
-
div设为display: flex，再加justify-content: center（水平居中）和align-items: center（垂直居中） -
label保持默认display: inline即可，无需设block或宽高 - 如果
div没有显式高度，align-items: center可能“没效果”——因为父容器高度由内容撑开，此时垂直居中无参照；需设height或min-height - 示例：
<div style="display: flex; justify-content: center; align-items: center; height: 60px; border: 1px solid #ccc;"> <label>用户名</label> </div>
为什么不用 line-height == height？
这个老办法只对单行纯文本有效，且隐含陷阱：
- 一旦
label里有span、图标或换行，line-height就会失效或导致文字被截断 - 字体渲染差异（尤其在 macOS / Windows / iOS 上）会让“视觉居中”偏移几个像素
- 必须严格保证
div高度固定，响应式场景下几乎不可维护 - 如果
label是inline元素，text-align: center只管水平，对垂直毫无作用
label 和 input 一起时，别只想着“label居中”
实际表单中，label 很少单独存在。常见错误是给整个 div 设 text-align: center，结果 input 也居中了，但 label 和 input 之间出现奇怪间隙或错位：
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把
label + input包进一个div.form-row，再对该容器用display: flex; align-items: center - 避免给
label设width: 100%后又用text-align: center——这会让文字居中但标签本身仍左贴边，容易和后续元素冲突 - 特别注意
vertical-align：input默认是baseline，label是text-bottom，不统一就会“看起来没对齐”，哪怕你已经用了flex
移动端或小屏下要留意 min-width 和 gap
Flex 容器在窄屏上可能把 label 挤出可视区，或让文字折行破坏居中效果：
- 给
label加white-space: nowrap防止意外换行（但需确认文字长度可控） - 用
gap替代margin控制label和兄弟元素间距，更稳定 - 如果
div宽度动态变化，优先用flex: 0 0 auto固定label宽度，而非百分比 - iOS Safari 对
flex的某些旧版本实现有 bug，遇到异常可加flex-shrink: 0强制不压缩
真正难的不是“怎么写一行 CSS 让它看起来居中”，而是判断它是否在所有设备、所有字体、所有内容长度下都稳定居中——这时候，flex 的确定性远胜于 line-height 技巧。
