如何在两个平行div中实现页面内表格居中并保持固定间距

解决方案 #

核心修改点：

• 给左右表格容器设置flex垂直布局，分别控制内部表格的对齐方向：左侧容器右对齐表格，右侧容器左对齐表格
• 调整外层容器的布局逻辑，去掉多余的负margin，改用gap控制间距
• 保持表格的固定宽度，确保布局稳定

修改后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Table Generator</title>
    <style>
      body {
        text-align: center;
      }

      #inputContainer {
        margin-bottom: 20px;
      }

      #tableContainer {
        display: flex;
        justify-content: center;
        gap: 50px; /* 直接设置表格间的固定间距 */
        padding: 40px;
        box-sizing: border-box;
      }

      .tableWrapperLeft {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* 左侧容器内表格右对齐 */
        border: 2px solid yellow;
        padding: 0 20px; /* 可选，避免表格贴容器边缘 */
      }

      .tableWrapperRight {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 右侧容器内表格左对齐 */
        border: 2px solid yellow;
        padding: 0 20px; /* 可选，避免表格贴容器边缘 */
      }

      table {
        border-collapse: collapse;
        margin-bottom: 50px;
        width: 288px;
        height: 288px;
        border: 2px solid green;
      }

      td {
        border: 1px dotted black;
        text-align: center;
      }

      td:first-child {
        border-left: 1px dotted black;
      }

      tr:first-child td {
        border-top: 1px dotted black;
      }
    </style>
  </head>
  <body>
    <div id="tableContainer">
      <div class="tableWrapperLeft">
        <table>
          <tr>
            <td>V</td><td>W</td><td>E</td><td>G </td>
          </tr>
          <tr>
            <td>G</td><td>K</td><td>L</td><td>D </td>
          </tr>
          <tr>
            <td>W</td><td>F</td><td>U</td><td>N </td>
          </tr>
          <tr>
            <td>G</td><td>A</td><td>Q</td><td>L </td>
          </tr>
        </table>
        <!-- 新增测试多个表格的情况 -->
        <table>
          <tr>
            <td>A</td><td>B</td><td>C</td><td>D </td>
          </tr>
          <tr>
            <td>E</td><td>F</td><td>G</td><td>H </td>
          </tr>
        </table>
      </div>
      <div class="tableWrapperRight">
        <table>
          <tr>
            <td>U</td><td>N</td><td>P</td><td>H </td>
          </tr>
          <tr>
            <td>Q</td><td>L</td><td>R</td><td>B </td>
          </tr>
          <tr>
            <td>J</td><td>B</td><td>I</td><td>N </td>
          </tr>
          <tr>
            <td>D</td><td>A</td><td>H</td><td>T </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

关键说明 #

1. 外层容器#tableContainer：使用justify-content: center让左右容器整体居中，gap: 50px直接控制两个容器间的水平间距，替代原有的负margin方案，更简洁稳定。
2. 左右表格容器：通过display: flex+flex-direction: column实现内部表格的垂直堆叠，再分别用align-items: flex-end（左侧）和align-items: flex-start（右侧）控制表格的对齐方向，完美实现左table右移、右table左移的效果。
3. 多表格适配：垂直flex布局天然支持多个表格的堆叠，不会出现布局错乱，每个表格都会保持正确的对齐方向和间距。

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