Использование нового способа центрирования

26 сентября 2018 | Опубликовано в css | Нет комментариев »

В этом уроке мы сравним новый способ центрирования с одним из старых. Одна из наиболее сложных задач в CSS — центрировать и по вертикали, и по горизонтали одновременно в ситуации, когда неизвестны высота и ширины того, что нужно расположить по центру. Вертикальное центрирование сложнее горизонтального.

Но этого можно было добиться еще в браузере Internet Explprer версии 8 с помощью использования свойств отображения в виде таблицы и вертикального расположения со значением «посредине» для вертикального позиционирования.

Предположим, что вам нужно расположить одно предложение точно по центру окна браузера, используя подобный код HTML:

...
<body>
  <span>
    Centered vertically and horizontally.
  </span>
</body>
...

Это можно сделать с помощью следующего кода CSS:

html, body {
  margin: 0;
  height: 100%;
}
body {
  display: table;
  width: 100%;
}
body > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Возможно, это один из старейших способов центрирования с использованием CSS. Можете проверить сами, он работает даже в браузере Internet Explorer 8:

Сейчас можно применить и другие, современные способы верстки, такие как Flexbox и сетки CSS.

И вот как с помощью последнего, самого современного, варианта, можно задавать расположение по центру:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Нам даже не нужно класть предложение в тег span в этом случае. Но так как это очень новое свойство, то даже новые версии браузеров, поддерживающих сетки CSS, например такие, как Microsoft Edge, пока что не поддерживают свойство расположения элементов. Так что для них пока придется использовать такие свойства, как align-items: center; (выравнивание элементов по центру) и justify-content: center; (выравнивание содержимого по центру).

Автор урока Chris Coyier

Перевод — Дежурка

Опубликовано в css, сентября 26, 2018
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Использование нового способа центрирования

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые