Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах

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

Если вы знаете точные значения ширины и высоты элемента, его можно расположить точно в центре его родительского элемента с помощью способа, описанного нами в уроке «Использование различных методов для размещения объекта ровно по центру»: задать значение верхнего и левого углов как 50% и отрицательные внешние отступы как половину высоты и ширины элемента. Этот способ отлично подходит для известных фиксированных значений высоты и ширины элемента, но что, если значения высоты и ширины элемента, который нужно расположить по центру, заданы в процентах?

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

Если бы нужно было отцентрировать строчно-блочный элемент, можно было бы использовать невидимый псевдоэлемент и свойство вертикального расположения со значением средины. Но чаще всего отцентровать нужно не строчно-блочные элементы, а окно, которое появляется поверх всего. Также для маленьких экранов и адаптивных сайтов, вероятней всего, окно диалога должно будет иметь размеры, заданные в процентах или другим относительным способом, например, с помощью только свойства максимальной ширины.

Поэтому воспользуемся другим способом: вместо использования отрицательных внешних отступов, применим свойством трансформации с функцией переноса:

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /* Вместо( margin-left: -25%; margin-top: -25%; */

  /* Добавим */
  transform: translate(-50%, -50%);
  /* Значение высоты можно даже не указывать */
  width: 40%;
  height: 50%;
}