如何用CSS和Bootstrap 4实现表单输入框居中？

嘿，我明白你的困扰了！你已经把表单标签成功居中，但form-control类默认的display: block确实会让输入框占满父容器宽度，导致text-align: center对它完全不起作用——毕竟块级元素本身就撑满了可用空间，自然看不出居中效果。下面给你两种简单靠谱的解决办法：

方法1：将form-control改为行内块元素 #

这种方法能让输入框直接继承父元素的text-align: center规则，同时你可以自定义输入框宽度避免太窄：

#centered .form-control {
  display: inline-block;
  /* 根据需求调整宽度，比如250px，按需修改即可 */
  width: 250px;
}

原理：inline-block兼具行内元素和块级元素的特性——它会像行内元素一样跟随文本对齐规则，同时又能设置宽高，完美适配你的居中需求。

方法2：保持块级元素，用margin:auto居中 #

如果你想保留form-control的块级特性（比如默认的宽度自适应行为），可以给它设置固定宽度后用margin: 0 auto实现水平居中：

#centered .form-control {
  width: 250px;
  margin: 0 auto;
}

原理：块级元素在设置了明确宽度后，margin: auto会自动分配左右边距，让元素在父容器中自动水平居中。

另外顺便提个小细节：你的HTML里多个input用了同一个id="ex2"，这不符合HTML规范哦，每个元素的id必须是唯一的，建议改成ex-email、ex-name这类有辨识度的唯一值~

内容的提问来源于stack exchange，提问作者SupremeA