弹窗容器居中后label仍偏左，因label是行内元素，默认左对齐；需对其父容器（如.modal-body）设display: flex; align-items: center; justify-content: center;实现整体水平垂直居中。
弹窗容器居中后，label为什么还偏左？
因为 label 本身是行内元素，默认不占满父容器宽度，即使弹窗整体已用 position: fixed + transform: translate(-50%, -50%) 居中，label 在弹窗内部仍按文档流左对齐。这不是弹窗没居中，而是弹窗内部布局没处理。
label在弹窗里水平居中要加哪几行CSS？
直接给弹窗内容区（比如 .modal-body）设 flex 布局即可，不需要动 label 单独的样式：
display: flexflex-direction: columnalign-items: center
这样所有子元素（包括 label、input、报错提示等）都会水平居中；如果还想垂直居中，再加 justify-content: center，但注意要确保父容器有明确高度或足够内容撑开。
label和input一起居中时常见错位现象
典型表现：弹窗居中了，label 和 input 并排后整体左偏、上下不对齐、换字体后错位。
立即学习“前端免费学习笔记（深入）”；
- 别用
text-align: center包整个弹窗——它只影响行内内容，对input这类替换元素无效 - 别给
label单独设margin: auto——块级label在无宽高约束下不会生效 - 推荐把每组
label+input包进一个.form-row，再对这个容器设display: flex; align-items: center;，避免跨行干扰 - iOS Safari 下
input默认有额外 padding，需统一重置：input { padding: 0.375em 0.75em; }
为什么不能只靠 vertical-align 让 label 居中？
vertical-align 只在行内环境或 table-cell 中起作用，而弹窗内容区通常是 block 或 flex 容器。把它强行加在 label 上，基本没效果，还可能因基线计算引发意外偏移。
真正可控的路径只有两条：一是让 label 所在的直接父容器成为 flex 容器并控制 align-items；二是用 grid 的 place-items: center。前者更轻量，后者适合多层嵌套场景。复杂点在于，很多人会忽略弹窗遮罩层（.modal-overlay）是否设置了 position: relative——它不该设，否则会干扰 position: fixed 的定位基准。
