HTML:

```
<table>
  <thead>
    <tr>
      <th>
        Column 1
      </th>
      <th>
        Column 2
      </th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>
        <img src="https://material.io/icons/static/images/icons-180x180.png">
      </td>
    </tr>
  </tbody>
</table>

```

CSS:

```
table {
  width: 100%;
  margin-bottom: 1rem;
}

tbody {
  background: red;
}

tbody td {
  text-align: center;
}

```

As you can see, the image isn't centered in the table (but a little on the left):

[![enter image description here](https://i.stack.imgur.com/AfNLR.png)](https://i.stack.imgur.com/AfNLR.png)

How do I achieve this?

[![enter image description here](https://i.stack.imgur.com/2Id3w.png)](https://i.stack.imgur.com/2Id3w.png)

Codepen: <https://codepen.io/alexcheninfo/pen/vWvmLd>