如何使用没有 Bootstrap 的纯 CSS 将两个 div 居中？

Question

所以我知道这可以使用 Flexbox 来实现，但特别是在使用 Bootstrap 未加载的非常轻量级的电子商务网站时（如 Shopify 主题），有时我们只想坚持使用纯 CSS 为简单起见。

如何使用 CSS 达到与此相同的效果？

<center>
  <table>
    <tr>
      <td>
        <div>
          <img ... />
          <br />
          <label ... />
        </div>
      </td>
      <td>
        <div>
          <img ... />
          <br />
          <label ... />
        </div>
      </td>
    </tr>
  </table>
</center>

（粗略的示例，但希望能说明问题。）

Answer 1

您需要将 div 的保证金设置为自动。这将使 div 在父容器中居中。

div { 
  margin: 0 auto;
  width: 100px;
}