如何居中联系表单内容？margin:auto未生效求助

嘿，我来帮你搞定这个表单居中的困惑！你遇到的问题其实很常见——你误以为父容器的margin: auto能让子元素自动居中，但实际上得给表单控件本身设置居中样式才行。

问题根源 #

你给.form-control设置了固定宽度600px，但这些表单元素（input、textarea）默认是inline-block类型，而且你没给它们添加自身水平居中的样式。text-align: center只是让元素内部的文本居中，没法让元素本身在父容器里居中。

修复方案 #

只需要修改你的.form-control CSS规则，添加margin: 0 auto和display: block：

.form-control {
  width: 600px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
  color: #fff;
  /* 新增这两行，让元素自身水平居中 */
  margin: 0 auto;
  display: block;
}

/* 简化hover样式，不需要重复所有属性 */
.form-control:hover {
  /* 这里可以写你想要变化的样式，比如把边框颜色加深 */
  border-bottom: 1px solid #fff;
}

为什么这样有效？ #

• display: block：把表单控件转换成块级元素，这样margin: 0 auto才能生效（inline元素没法用margin:auto实现水平居中）。
• margin: 0 auto：让块级元素在父容器的水平方向上自动居中，左右外边距会自动分配剩余空间。

另外，你的.contact-form设置width: 100%和margin: 0 auto其实没必要，因为它本身就是块级元素，默认占满父容器宽度，这部分可以删掉或者保留都不影响最终效果。

修改后，你的表单控件就会完全居中，文本也会因为你之前设置的text-align: center保持居中状态啦！

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