Why image doesn’t center in ?

so i am building a web-app with google script and the result is a dashboard with several tables. I am also using bootstrap (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css).
I’ve been looking for an answer for long days but i just can’t find out what i am missing.

So in a table, i want to insert an image that has to be centered horizontally and vertically, in the center of the td and has to fit and adapt to the row or td height i’ll choose.

But again and again, my image goes to the bottom of the td/row and often overlaps and below the row, it seems to have the right height, but it never places itself correctly. I have made a copy of little portion of my code to make it clearer:

Here the result i get

And here is my code:

<div class="row" style="width: 500px"> <!-- TABLE TEST -->
        <div > <!-- Test -->
          <table class="table">
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>3</td></tr>
              <tr><td>11</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>33</td></tr>
              <tr><td>111</td><td><img src="https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>333</td></tr>
            </tbody>
          </table>
        </div> <!-- CLOSE TABLE TEST -->

I also paste here my page.css code:

<style>
  .row {
  }

  table {
    text-align: center;
  }  

  tr {
    line-height: 20px;
  }
  
  th, td {
    position:relative;
    text-align:center;
    vertical-align:middle;
  }

  img {
    display: block;
    vertical-align: center;
    position:absolute;
    height:20px;
  }
  </style>

I have tried what i found around: display:block, position:relative for parents, absolute for childs, and several other solutions, but nothing seems to work.
I am clearly missing something and i probably have messed with the styles so much that i even might have tried the good solution which might have been blocked by other mistakes.

Thanks to who might help