Текст, центрирующий ячейку 1 см x 1 см

Question

Я хочу создать таблицу с 3 ячейками. Вторая ячейка должна быть центрирована и 1 см шириной на 1 см высоты. Текст во второй ячейке должен быть горизонтально/вертикально по центру:

я почти удалось, но даже после многих попыток я абсолютно не иметь текст появиться в середине второй ячейки:

<table> 
 
    <tr> 
 
    <td style="width:50%;"></td> 
 
    <td style="min-width:1cm;max-width:1cm;border:none"> 
 
     <div style="min-height:1cm;max-height:1cm;background-color:red"> 
 
     <span class="PageNumber">1</span> 
 
     </div> 
 
    </td> 
 
    <td style="width:50%;"></td> 
 
    </tr> 
 
</table>

Как я могу использовать span для заполнения полного контейнера div, чтобы иметь центрированный текст (вертикальный & горизонтальный)?

NB: реальный код более сложный, и я только что извлек часть, которая вызывает проблемы (центрирование текста в ячейке 1x1 см).

Answer 1

Помимо того, что таблицы должны использоваться только для табличных данных, вы можете добиться того, что вы хотите с помощью display:flex:

.number { 
 
    display: flex; 
 
    min-height: 1cm; 
 
    max-height: 1cm; 
 
    background-color: red; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<table> 
 
    <tr> 
 
    <td style="width:50%;"></td> 
 
    <td style="min-width:1cm;max-width:1cm;border:none"> 
 
     <div class="number"> 
 
     1 
 
     </div> 
 
    </td> 
 
    <td style="width:50%;"></td> 
 
    </tr> 
 
</table>

Answer 2

<table> 
    <tr> 
    <td style="width:50%;"></td> 
    <td style="min-width:1cm;max-width:1cm;border:none"> 
     <div style="display:inline-block;min-height:1cm;max-height:1cm;background-color:red"> 
     <div style="margin:0 auto;vertical-align:middle;"> 
      <span class="PageNumber">1</span> 
     </div> 
     </div> 
    </td> 
    <td style="width:50%;"></td> 
    </tr> 
</table> 

TL: DR:

Я создал DIV внутри DIV так margin: 0 auto заставит его центр по горизонтали и display стилей центрируют его по вертикали.

Подробнее о CSS центрирования: https://www.w3.org/Style/Examples/007/center.html