label默认行内元素，无宽高且不占块级空间，故margin:0 auto和text-align:center均无法使其视口居中；最稳解法是用display:flex包裹并设100vw/100vh，或用absolute+transform(-50%,-50%)。
label 元素默认是行内元素，没有宽高、不占块级空间，直接设 margin: 0 auto 或 text-align: center 都不会让它“在视口中”居中——它需要被包裹、被约束、被赋予上下文。
为什么 label 单独写没法居中
它既不是定宽块级元素（margin: 0 auto 失效），也不是父容器里的唯一行内内容（text-align: center 只影响其内部文字，不移动自身位置）。更关键的是，“视口居中”意味着要同时控制水平和垂直两个维度，而 label 自身没有任何高度或定位锚点可依赖。
最稳的解法：用 display: flex 包一层视口级容器
把 label 放进一个撑满视口的 div，再用 flex 控制对齐：
<div style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;"> <label for="demo">点击我</label> </div>
- 必须显式设
width: 100vw和height: 100vh，否则父div高度塌陷，align-items: center就没参照 - 避免用
body直接 flex：某些浏览器会因默认margin或padding导致偏移 - 如果
label里有input或其他表单控件，优先包成.form-row再整体居中，别只居中label
替代方案：绝对定位 + transform（兼容老浏览器）
当不能改结构或需支持 IE11 时，可用这个组合：
立即学习“前端免费学习笔记（深入）”；
<label style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" for="demo">点击我</label>
- 必须加
position: absolute，否则top/left无效 -
transform: translate(-50%, -50%)是关键：它以元素自身宽高为基准偏移，不依赖尺寸声明 - 注意：若父容器有
transform、perspective或filter，会创建新层叠上下文，导致定位参考错乱
容易被忽略的细节
如果 label 里含图标、img 或 span，它们的 vertical-align 默认是 baseline，可能让整体视觉中心上浮；此时要在 label 上加 line-height: 1.2 或统一子元素 vertical-align: middle。另外，iOS Safari 对无 cursor: pointer 的 label 点击热区识别不准，建议始终加上。
