Горизонтальное и вертикальное центрирование блока

Эта техника применяется, в основном, для вёрстки модальных окон. Основывается на том, что блокс position: absolute смещается относительно ближайшего родителя с position: relative | absolute | fixed. Смещение задаётся при помощи CSS-свойств

Если мы используем единицу измерения % для задания смещения, важно помнить, что процент берётся относительно родительского контейнера.Это значит, что left: 50% сместит блок на 50% от ширины родителя, а не от собственной ширины. Для того, чтобы сместить блок на 50% относительно собственной ширины, необходимо использовать свойство transform с функцией translateX(50%) - движение по оси X, translateY(50%) - движение по оси Y или translate(50%, 50%) - движение по обеим осям.

В примере ниже показано, как мы сначала смещаем абсолютно спозиционированный блок на 50% слева направо (left) и на 50% сверху вниз (top) относительно контейнера,а затем, смещаем на 50% вверх и на 50% вправо относительно самого себя (transform: translate(-50%, -50%)), чтобы блок встал ровно по центру контейнера.

Дело в том, что в CSS, началом координат является верхняя левая точка элемента, а не центр элемента.Поэтому нам не достаточно просто подвинуть блок на 50% вниз и вправо, так как тогда в центре контейнера окажется левый верхний угол блока, а не центр блока.

Пример:

Код:

<div class="container">
  <div class="block"></div>
</div>
.container {
  position: relative;
  width: 100%;
  height: 250px;
}

.block {
  position: absolute; /* позволяет двигать блок относительно родительского релятивного контейнера */
  top: 50%; /* смещаем блок на 50% от высоты родителя */
  left: 50%; /* смещаем блок на 50% от ширины родителя */
  transform: translate(-50%, -50%); /* смещаем блок на 50% от ширины и высоты этого блока */
  width: 120px;
  height: 80px;
}

Задача

Сделать просмотр изображений как на dns-shop.ru

  • Размер внешнего контейнера: 100% * 100vh
  • Вместо картинок можно использовать цветные блоки
  • Стрелочки: arrow-left, arrow-right; изображение кнопки "закрыть": close.