HTML表单内DIV无法居中问题求助

我太懂这种折腾布局的烦躁了——试了各种方法还是居中不了，调个宽度还触发换行，简直头大！结合你遇到的问题，给你几个亲测有效的方案：

方案1：Flex布局（最推荐，现代浏览器全兼容） #

Flex是解决这类布局问题的神器，能轻松让两个div并排且整体居中，还能避免莫名其妙的换行。只需要给包裹两个div的父容器加几个样式：

<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
  <!-- 父容器开启Flex布局，设置水平居中+间距 -->
  <div style="width: 100%; display: flex; justify-content: center; gap: 15px; /* 可选：给两个div加间距，避免挤在一起 */">
    <!-- 你的第一个DIV内容 -->
    <div style="/* 保留你原有的样式即可，不用再加margin:auto */">
      <!-- 比如输入框、按钮等内容 -->
    </div>
    <!-- Disabled Switch的DIV -->
    <div style="/* 保留原有样式 */">
      <!-- 开关组件内容 -->
    </div>
  </div>
</form>

为啥这个好用？ #

• justify-content: center 直接让子元素在水平方向居中
• display: flex 让两个div默认并排排列，只要父容器宽度足够，绝对不会乱换行
• 要是担心极端窄屏的情况，加个 flex-wrap: wrap 就能让它们在空间不足时自动换行，还保持居中

方案2：Grid布局（更简洁的写法） #

如果觉得Flex不够简洁，Grid布局能一行代码搞定居中+并排：

<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
  <div style="width: 100%; display: grid; place-items: center; grid-template-columns: auto auto; gap: 15px;">
    <div>第一个DIV内容</div>
    <div>Disabled Switch内容</div>
  </div>
</form>

place-items: center 同时搞定水平和垂直居中，grid-template-columns: auto auto 指定两列，每列宽度随内容自适应，完美避免换行问题。

方案3：修复你原来的尝试（不用新布局） #

如果你不想改布局方式，也可以修复原来的问题：
你之前用 margin: auto 和 width: 50% 失效，大概率是因为两个div默认是块级元素（上下排列），而且宽度加起来可能超出父容器（比如有padding/margin）导致换行。试试把div改成行内块元素：

<form method="post" action="Invitation.php" onsubmit="return checkForm(this)">
  <div style="width: 100%; text-align: center;">
    <!-- 把div设为inline-block，让它们并排 -->
    <div style="display: inline-block; margin: 0 10px; /* 加左右间距 */">第一个DIV</div>
    <div style="display: inline-block; margin: 0 10px;">Disabled Switch</div>
  </div>
</form>

父容器的 text-align: center 会让所有行内块元素整体居中，而且只要容器宽度够，绝对不会换行。

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