表单内文本居中需分场景：label与input水平居中用justify-content-center加在.row上；垂直居中用align-items-center确保二者同属一个flex容器；单个input内部文字居中用text-center。
表单内文本居中对齐不能靠 text-center 一招通吃——它只影响行内内容在块容器内的水平位置，对 label 和 input 这类块级元素本身的位置毫无作用。
label 和 input 水平居中：必须用 justify-content-center
直接给 .row 加 justify-content-center，让整行子列（包括 label 和包裹 input 的 .col）在主轴上整体居中。这是唯一可靠、响应式友好的方式。
-
text-center加在.col或.form-group上无效：它不改变label和input两个兄弟元素的相对位置 - 别把
justify-content-center加在.container或外层div上——它不是 flex 容器，加了没反应 - 如果用了
row但没加justify-content-center，默认行为是左对齐，且不会因父容器变宽而自动居中
<div class="row justify-content-center mb-3">
<label for="email" class="col-auto col-form-label">邮箱</label>
<div class="col-md-6">
<input type="email" class="form-control" id="email">
</div>
</div>
label 文字和 input 内容垂直居中对齐：align-items-center 是关键
视觉“不对齐”本质是基线错位：label 文字底部和 input 边框中线不重合。解决方法是让它们成为同一个 flex 容器的直接子项，并统一交叉轴对齐。
- 必须把
label和input（或其包裹.col）都放进同一个.row，且都是该row的直接子元素 - 给
.row加align-items-center，强制所有子项按内容区中线对齐 - 不要给
label单独设line-height或padding去硬调——破坏响应式，且在字体缩放时失效
单个 input 或按钮内部文字居中：用 text-center + d-inline-block
当目标只是让某个 input 或 button 内部的文字水平居中（比如搜索框、提交按钮），而不是整个表单项居中，就该换思路：
-
input默认不继承text-align，需显式加class="text-center" -
button可直接加text-center，但若它被设为d-block或放在 flex 容器里，要确认未被justify-content覆盖 - 避免对
input同时加text-center和mx-auto d-block——后者会让整个输入框居中，前者只管内部文字
<input type="text" class="form-control text-center" placeholder="请输入">
容易忽略的结构陷阱
90% 的居中失败不是类名写错，而是 DOM 层级破了 flex 布局前提：
-
label和input不在同一个.row下，中间隔了额外div——align-items-center失效 - 用了
input-group包裹input，再把它塞进.row，但label在外面——两者已不在同一 flex 容器中 -
.row高度塌陷（比如只有文字没设高度），align-items-center有心无力；此时需加min-height或h-100
