label文字水平居中用text-align:center即可，但需确保label有明确宽度或设为inline-block；label与input垂直对齐应使用flex布局配合align-items:center，避免vertical-align或废弃的center标签。
label 文字内容水平居中，用 text-align: center 就够了
只要目标是让 label 标签内部的文字（比如“用户名”）在标签自身宽度内居中显示，直接给 label 加 text-align: center 即可。它只作用于行内内容，不干扰布局流，也不依赖父容器类型。
常见错误是给父容器加 text-align: center 后发现所有子元素都歪了——比如按钮、图标也跟着居中，这不是 label 的问题，而是该属性会继承并影响所有后代行内内容。
- 必须确保
label有明确的宽度（width或max-width），否则文字会撑满整行，视觉上“看不出居中” - 若
label是display: inline（默认），它本身没宽高概念，text-align不生效；此时要么设display: inline-block，要么包裹一层块级容器 - 移动端小屏下，文字换行时
text-align: center仍有效，但要注意white-space和word-break配合
label + input 整体垂直对齐，优先用 display: flex
单独居中文字只是表象，真正卡住多数人的，是 label 和紧挨着的 input 看起来“不在一条线上”。这不是 margin 没调好，而是浏览器默认按基线（baseline）对齐：文字基线在字底，而 input 的基线实际落在框体偏下位置。
最稳的解法是把每组 label + input 包进一个容器，并设：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
form-row {
display: flex;
align-items: center;
}这句 align-items: center 直接把交叉轴（默认是垂直方向）对齐基准统一为中点，彻底绕过基线差异。
- 别给
label或input单独加vertical-align—— 它只在 inline/inline-block 场景下起作用，且父子间容易冲突 - 如果表单要响应式，
flex天然支持flex-wrap和gap，比 float 或 table 布局干净得多 - IE10+ 全支持，iOS Safari 7.1+ 也没问题，2026 年已无兼容顾虑
需要 label 和 input 左右分栏对齐？用 flex: 0 0 <width></width> 控制标签宽度
当多个表单项纵向排列，且希望所有 label 右边界对齐（比如都到第 80px）、input 左侧对齐并自适应宽度，光靠 text-align 或 flex 默认行为不够。
关键在给 label 设固定弹性收缩行为：
.form-row label {
flex: 0 0 80px; /* 不放大、不缩小、固定 80px 宽 */
}
.form-row input {
flex: 1; /* 剩余空间全占 */
min-width: 0; /* 防止小屏下 flex item 溢出 */
}这样既保证标签列整齐，又让输入框能随容器缩放。
- 避免用
width: 80px+float，浮动需额外clear，且脱离文档流后高度塌陷风险高 - 不用
grid也能做到，但flex更轻量；若已有 grid 布局父容器，反而不宜嵌套 flex，容易失控 -
min-width: 0很关键：某些浏览器（如旧版 Safari）对 flex item 有最小尺寸限制，不加这句，小屏下input可能被压缩变形
绝对不能依赖 <center></center> 或 align 属性
<center></center> 是 HTML4 废弃标签，align 属性（如 <div align="center">）在 HTML5 中已完全移除。它们不仅语义错误，而且行为不可预测：不同浏览器渲染差异大，尤其在嵌套或 flex 容器里会直接失效。<p>更隐蔽的坑是表格的 <code>align 属性（如 <table align="center">），它只控制表格自身在页面中的水平位置，对内部 <code>label 文字毫无影响，还可能干扰 CSS 的层叠顺序。
- 现代项目里，任何还在用
<center></center>的代码，基本等于主动放弃可维护性和无障碍支持 - 如果你看到某段老代码靠
align属性“看起来居中”，那大概率是巧合——背后有隐藏的 margin、padding 或 line-height 在顶着 - 真要兼容极老环境（如 IE8），应选
margin: 0 auto（块级 + 宽度）或display: table-cell+vertical-align，而不是回退到废弃属性
复杂点往往藏在“看起来没问题”的地方：比如 label 文字居中了，但和 input 垂直错位；或者小屏下 flex 布局突然崩开。这些都不是样式没写全，而是对齐机制、盒模型和渲染上下文的理解断层。
