Как центрировать элемент, используя таблицы без полос прокрутки?

Question

У меня есть таблица (только таблица на странице).В нем есть один ряд и 1 клетка.

Я хочу центрировать содержимое этой ячейки вертикально и горизонтально на странице.Я делаю это такими HTML и CSS.

HTML:

<table>
  <tr><td>keks</td></tr>
</table>

CSS:

html, body, table, tr, td {
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  vertical-align: middle;
}

Но этот подход добавляет полосы прокрутки (как вертикальные, так и горизонтальные).Как убрать полосы прокрутки?Если бы я удалил их на scrollbar: hidden, содержимое ячейки не было бы в центре страницы.Это было бы немного ниже и правее.

Также, возможно, мой подход не верен, и я могу добиться этого без добавления полос прокрутки, а содержимое будет посередине.

Вот пример: https://jsfiddle.net/0tpL9o7e/

Answer 1

Есть автоматически определенные значения полей HTML.Для этого появляется полоса прокрутки ... сначала нужно их сбросить.

* {
  margin:0;
  padding:0
}

table{
  width: 100vw;
  height: 100vh
}

td {
  text-align: center;
  vertical-align: middle;
}

<table>
  <tr><td>keks</td></tr>
</table>

Answer 2

Я бы просто установил поля равными 0 для элемента body, так как именно это и создало ваши полосы прокрутки.

Вы также можете скрыть прокрутки, установив overflow:hidden, но таким образом вы можете запретить пользователям видеть некоторый контент, который приходитпозже.

В браузерах, основанных на webkit, вы на самом деле можете скрывать полосы прокрутки, используя ::-webkit-scrollbar { display: none; }, все еще имея возможность прокрутки, только без полос.

html, body, table, tr, td {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
}

td {
  text-align: center;
  vertical-align: middle;
}

<table>
  <tr><td>keks</td></tr>
</table>

Answer 3

Добавить переполнение: скрыто включено html элемент:

html {
  overflow: hidden; 
}