How do you center two divs using pure CSS without Bootstrap?

Question

So I know this can be achieved using Flexbox, but especially when working with very lightweight eCommerce sites where Bootstrap isn't loaded (like Shopify themes), sometimes we just want to stick with pure CSS for simplicity.

How do I achieve the same effect as this using CSS?

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

(Crude example, but hopefully it gets the point across.)

Answer 1

You need to set margin's for the div to auto. This will centre the div in the parent container.

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