Трансформировать: перевести (-50%, -50%)

При работе с изображениями героев или всего экрана, я обычно вижу текст или изображения со следующим битом css:

.item {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Может кто-нибудь объяснить мне, что этот код на самом деле делает?

Ответ 1

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

переместите меня влево на 50% от моей ширины вдоль оси х и
переместите меня вверх на 50% от моего роста по оси у

Это эффективно перемещает центр элемента в его первоначальный верхний левый угол. Помните, что когда вы устанавливаете left: 50%; top 50% left: 50%; top 50% на элементе, вы перемещаете его верхний левый угол в центр его родителя (что означает, что он вообще не визуально не центрирован). Перемещая элемент назад влево и вверх на половину его ширины и высоты, вы уверены, что его центр теперь выравнивается с родительским центром, делая его визуально горизонтально + вертикально центрированным.

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

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

<div class="parent">
  <div class="child"></div>
</div>