html - 如何在没有 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;
}