Центрируем элемент на CSS, высота и ширина которого заданы в процентах

Если вы знаете точную ширину/высоту элемента, вы можете центрировать его в родительском элементе, используя простой классический трюк: для свойств top и left ставятся значения в 50% и указывается отрицательное поле (margin-left и margin-top) равное половине ширины и высоты элемента. Это замечательно, если вы знаете ширину и высоту центрируемого элемента, но что если они(ширина/высота) заданы в процентах.

Вы могли бы подумать об использовании отрицательного поля заданного в процентах. Однако это работает для горизонтального поля, но поля основаны на ширине элемента-родителя (даже вертикальное поле), таким образом, если вы попытаетесь использовать отрицательное верхнее поле margin-top, центрировать элемент не удастся.

Также есть небольшой трюк с участием псевдоэлемента "призрака" и inline-block/vertical-align, что довольно искусно. Но это потребует сделать центрируемый элемент как inline-block, что не очень распространено. Более вероятно, вам потребуется центрировать, что-нибудь наподобие модального окна. Вероятно, вы захотите использовать проценты, чтобы ваше модальное окно пропорционально менялось по ширине и на маленьких экранах (отзывчивый дизайн, например).

Есть способ! Вместо использования отрицательного поля, вы используете функцию translate() у свойства transform.

CSS

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

  /*
  Не работает =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /*
  Работает!
  */
  transform: translate(-50%, -50%);

  /*
 Высоту для элемента указывать не обязательно!
  */
  width: 40%;
  height: 50%;
}

Источник