title: HTML table content align center not working on one element
body: <p>I have a table that aligns all cell content in the center of the cell. I have used a repo Dice because I needed a quick animated dice. Unfortunately, I do not understand the CSS well enough to know why the dice is not aligning in the center of the cell, like all the other items.</p>
  <p>This is what it looks like on load:</p>
  <p><a href="https://i.stack.imgur.com/Zc8JW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zc8JW.png" alt="load" /></a></p>
  <p>And this is what it looks like if i roll a 6</p>
  <p><a href="https://i.stack.imgur.com/8jh2I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8jh2I.png" alt="6roll" /></a></p>
  <p>As you can see the dice now goes out of the cell and overflows to left side of the table.</p>
  <p>This is my html:</p>
  <pre><code>&lt;table id=&quot;diceTable&quot; class=&quot;halfTable&quot;&gt;
      &lt;th colspan=&quot;2&quot;&gt;
          Roll the dice
      &lt;/th&gt;
      &lt;tr&gt;
          &lt;td colspan=&quot;2&quot; class=&quot;tableCellCenter&quot;&gt;
              &lt;ol class=&quot;die-list &quot; data-roll=&quot;1&quot; id=&quot;die-2&quot;&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;1&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;2&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;3&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;4&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;5&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;die-item&quot; data-side=&quot;6&quot;&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                      &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ol&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan=&quot;2&quot; class=&quot;tableCellCenter&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;roll-button1&quot;&gt;Roll Dice&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class=&quot;tableCellCenter&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;btnMove1&quot;&gt;Move 1&lt;/button&gt;
  
          &lt;/td&gt;
          &lt;td class=&quot;tableCellCenter&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;btnMove2&quot;&gt;Move 2&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class=&quot;tableCellCenter&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;btnReturn1&quot;&gt;Return 1&lt;/button&gt;
          &lt;/td&gt;
          &lt;td class=&quot;tableCellCenter&quot;&gt;
              &lt;button type=&quot;button&quot; id=&quot;btnReturn2&quot;&gt;Retuen 2&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>And the CSS:</p>
  <pre><code>.die-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 6rem;
    list-style-type: none;
    transform-style: preserve-3d;
    width: 6rem;
  }
  
  .die-item {
    background-color: #fefefe;
    box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
      inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-areas:
      &quot;one two three&quot;
      &quot;four five six&quot;
      &quot;seven eight nine&quot;;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    padding: 1rem;
    width: 100%;
  }
  
  .td, .tableCellCenter {
    text-align: center;
  }
  </code></pre>
  <p>Can anyone help me align the dice in the center so it stays in the center, please?
  Thank you in advance.</p>