Ты замечательный!

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

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

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

 Theodore Steiner12 сент. 2017 г., 22:11
@ Терри - Спасибо, Терри, это действительно прояснило для меня! Если вы хотите добавить это в реальный ответ, я отмечу его как отвеченный / правильный.
 Debabrata12 сент. 2017 г., 22:02
Это аккуратный способ центрирования элемента вместо использования поля, если мы не знаем высоту и ширину контейнера.
 Terry12 сент. 2017 г., 22:20
@TheodoreSteiner Всегда пожалуйста! Я также обновил свой ответ иллюстративным, интерактивным примером, чтобы вы могли видеть, что происходит "за кадром" :)
 Terry12 сент. 2017 г., 22:06
-50% transform в основном означает, простыми словами, «переместить этот элемент влево и вверх на 50% от вычисленного размера вдоль оси».-50% вдоль оси х означает «переместить меня влево на половину моей вычисленной ширины», аналогично для оси Y. Причина, по которой это необходимо, заключается в том, что при настройкеtop: 50%; left: 50% элемента, вы перемещаете верхний левый угол элемента в центр его родителя. Тем не менее, центр элемента не совпадает с центром его родителя.
 Theodore Steiner12 сент. 2017 г., 22:04
@Debabrata - Это все, что я знаю, и, теоретически, я понимаю концепцию перемещения чего-либо влево и на 50% выше, но отрицательное движение назад с преобразованием, вы могли бы немного прояснить это для меня?

Ответы на вопрос(1)

Решение Вопроса

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

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

Это эффективно перемещает центр элемента в его оригинальный верхний левый угол. Помните, чем когда вы установите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>

 viery36530 янв. 2019 г., 16:45
Ты замечательный!

Ваш ответ на вопрос