Почему translateY (-50%) необходим для центрирования элемента, который находится вверху: 50%?

Question

Почему translateY (-50%) необходим для центрирования элемента, который находится вверху: 50%?

Я вижу, что этот код работает для выравнивания div по вертикали внутри родительского элемента:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

вопрос почему? Моя первая мысль была о том, что родительский элемент охватывает больше, чем видовой экран. Я сделал высоту родительского окна просмотра равной 100vh и шириной 100%. Это не сработало. Мне все еще нужен был перевод или отрицательное смещение маржи. Зачем мне нужно отрицательное смещение, когда родительский элемент установлен в margin: 0;? Это из-за вычисленной маржи, что я не принимая во внимание?

4 70

html css css3

4 ответа:

в то время как другие предоставили ответ, что -50 перемещает внутренний элемент обратно на половину его собственной высоты, я думал, что эта небольшая анимация показывает движение top: 50%; во-первых, а затем transform: translateY(-50%); во-вторых, может помочь.
@keyframes centerMe {
  0% { top: 0%; transform: translateY(0%); }
  50% { top: 50%; transform: translateY(0%); }
  100% { top: 50%; transform: translateY(-50%); }
}

.outer {
  position: relative;
  border: solid 1px;
  height: 200px;
  width: 200px;
}

.inner {
  position: relative;
  background-color: red;
  height: 50px; width: 50px;
  margin: auto;
  animation: centerMe 5s;
  animation-fill-mode: forwards;
}

/* rules for example */
.hline,.vline{background:#000;position:absolute}.vline{height:100%;width:1px;left:calc(50% - .5px);top:0}.hline{width:100%;height:1px;top:calc(50% - .5px)}
<div class="outer">
  <div class="hline"></div>
  <div class="vline"></div>
  <div class="inner"></div>  
</div>

67

position: relative;
top: 50%;
... перемещает элемент вниз на расстояние, равное половине высоты родителя.

так как позиция по умолчанию ставит top внутренний элемент top из внешнего элемента, это ставит top внутренний элемент средний внешнего элемента.
transform: translateY(-50%);
это перемещает внутренний элемент обратно на расстояние, равное половине высоты внутренний элемент.

объединение их ставит средний внутренний элемент средний родительского элемента.

29

почему top 50% нужно -50% перевести смещение?

вместо того, чтобы отвечать на этот вопрос напрямую, я собираюсь ответить на более общий вопрос:

как привязка позиции работает в CSS?

надеюсь, отвечая на вопрос в целом, вы поймете части, которые относятся к вашему конкретному случаю.

что вы подразумеваете под "позицией якорь"?

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

как выглядит привязка позиции?

я собираюсь использовать шаблон для всех дальнейших примеров, поэтому важно понять базу образец.
.container {
  background-image: -webkit-linear-gradient(left, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), -webkit-linear-gradient(left, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
  background-image: linear-gradient(to right, darkred 0, darkred 50%, goldenrod 50%, goldenrod 100%), linear-gradient(to right, darkgreen 0, darkgreen 50%, darkblue 50%, darkblue 100%);
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50.1%, 100% 50.1%;
  height: 70vh;
  margin: 15vh 15vw;
  position: relative;
  width: 70vw;
}
.box {
  background-image: -webkit-linear-gradient(left, red 0, red 50%, yellow 50%, yellow 100%), -webkit-linear-gradient(left, green 0, green 50%, blue 50%, blue 100%);
  background-image: linear-gradient(to right, red 0, red 50%, yellow 50%, yellow 100%), linear-gradient(to right, green 0, green 50%, blue 50%, blue 100%);
  background-position: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50.1%, 100% 50.1%;
  height: 50vmin;
  position: absolute;
  width: 50vmin;
}
<div class="container">
  <div class="box"></div>
</div>
в этом примере показан родитель .container, который имеет темно-красный, темно-желтый, темно-зеленый и темно-синий квадраты легко посмотреть центровку. Внутри он содержит .box, который имеет красный, желтый, зеленый и синий квадраты, чтобы показать контраст для выравнивания.

все дальнейшие примеры будут иметь этот шаблон уменьшен, чтобы сделать соответствующий код выделиться больше.

обратите внимание, что по умолчанию в верхнем левом ребенок привязан к верхнему левому краю родителя.

Родитель Анкеровки

родительская привязка может быть скорректирована с помощью top,bottom,left и right свойства дочернего элемента.

Top

с помощью top свойство будет привязывать верхний край ребенка к верхнему краю родителя.

предполагая, что bottom не установлено, top: 0 не будет отображаться иначе, чем по умолчанию top: auto
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 0;
}
<div class="container">
  <div class="box"></div>
</div>
использование процента выровняет верхний край ребенка в заданном проценте от верхней части родителя.

top: 50% - это середина родителей:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 50%;
}
<div class="container">
  <div class="box"></div>
</div>
top: 100% это нижняя часть родителя:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 100%;
}
<div class="container">
  <div class="box"></div>
</div>
Нижние Анкеровки

Нижний ставить на якорь поставит дно на якорь край ребенка к нижнему краю родителя:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
}
<div class="container">
  <div class="box"></div>
</div>
bottom: 50% - это середина родителя, а ребенок выровнен напротив top: 50%:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 50%;
}
<div class="container">
  <div class="box"></div>
</div>
bottom: 100% это верхняя часть родителя:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 100%;
}
<div class="container">
  <div class="box"></div>
</div>
Левый Якорь

The left свойство будет привязывать левый край ребенка к левому краю родитель.

предполагая, что right не установлено, left: 0 не будет отображаться иначе, чем по умолчанию left: auto.

left: 50% - это середина родителей:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  left: 50%;
}
<div class="container">
  <div class="box"></div>
</div>
left: 100% оставляет ребенка висеть с правой стороны от родителя.

Правый Якорь

The right свойство будет привязывать правый край ребенка к правому краю родитель:

right: 50% - это середина родителя, а ребенок выровнен напротив left: 50%:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  right: 50%;
}
<div class="container">
  <div class="box"></div>
</div>
right: 100% оставляет ребенка висеть с левой стороны от родителя.

Привязка Ребенка

Дочерний якорь можно регулировать независимо от родительского якоря, используя transform собственность. В частности,translate,translateX и translateY функции будут использоваться для удара дочернее поле для использования другого выравнивания.

причина, по которой это работает, заключается в том, что проценты в translate значение относительно ребенок, в то время как проценты в top,bottom,left и right свойства являются относительными к родитель.

Вертикальное Выравнивание

используя transform: translateY(), выравнивание ребенка может быть наткнулся вверх или вниз.

transform: translateY(0) оставим ребенка там, где он и вообще не очень полезно.

когда ребенок привязан к верхней части родителя,transform: translateY(-50%) выровняет ребенка по его центру:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  top: 0;
  transform: translateY(-50%);
}
<div class="container">
  <div class="box"></div>
</div>
аналогично, когда ребенок привязан к нижней части родителя,transform: translate(50%) выровняет ребенка по его центру:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
  transform: translateY(50%);
}
<div class="container">
  <div class="box"></div>
</div>
это также означает, что top: 100% эквивалентно bottom: 0; transform: translateY(100%):
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  bottom: 0;
  transform: translateY(100%);
}
<div class="container">
  <div class="box"></div>
</div>
Горизонтального Выравнивания

используя transform: translateX(), выравнивание ребенка может быть наткнулся влево или вправо.

transform: translateX(0) оставит ребенка там, где он находится по умолчанию.

когда ребенок закреплен слева от родителя,transform: translateX(-50%) выровняет ребенка по его центру:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  transform: translateX(-50%);
}
<div class="container">
  <div class="box"></div>
</div>
аналогично, когда ребенок привязан к право родителя, transform: translateX(50%) выровняет ребенка по его центру:
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  right: 0;
  transform: translateX(50%);
}
<div class="container">
  <div class="box"></div>
</div>
left: 100% эквивалентно right: 0; transform: translateX(100%).

Центр Крепежных

центрирование-это просто вопрос выравнивания ребенка к середине родителя, а затем натыкаясь на происхождение ребенка на место.
.container{background-image:-webkit-linear-gradient(left,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),-webkit-linear-gradient(left,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-image:linear-gradient(to right,darkred 0,darkred 50%,goldenrod 50%,goldenrod 100%),linear-gradient(to right,darkgreen 0,darkgreen 50%,darkblue 50%,darkblue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:70vh;margin:15vh 15vw;position:relative;width:70vw;}.box{background-image:-webkit-linear-gradient(left,red 0,red 50%,yellow 50%,yellow 100%),-webkit-linear-gradient(left,green 0,green 50%,blue 50%,blue 100%);background-image:linear-gradient(to right,red 0,red 50%,yellow 50%,yellow 100%),linear-gradient(to right,green 0,green 50%,blue 50%,blue 100%);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 50.1%,100% 50.1%;height:50vmin;position:absolute;width:50vmin;}

.box {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <div class="box"></div>
</div>
из-за симметрии, вы также можете использовать:
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);

7

Andrew Bone · Accepted Answer · 2016-11-10 23:19:54

top: 0 (по умолчанию)

по умолчанию ваш элемент находится в верхней части страницы, а верхняя часть элемента - в 0:
--------Top of Page--------
{element}


------Middle of  Page------



------Bottom of  Page------
top: 50%

когда вы перемещаете его вниз на 50% высоты (50% всей страницы), верхняя часть элемента находится на отметке 50%, что означает, что элемент начинается с 50% и не центрируется.
--------Top of Page--------



------Middle of  Page------
{element}


------Bottom of  Page------
top: 50%; transform:translateY(-50%);

когда верхняя часть элемента находится на полпути Марк, мы можем переместить элемент обратно на половину его собственной высоты, чтобы центрировать его со всей страницей. Это именно то, что transform:translateY(-50%); тут:
--------Top of Page--------



{element}-Middle of Page---



------Bottom of  Page------
но почему мы не можем просто сказать top: 25% или что-то подобное? Я сделал быстрый фрагмент, чтобы показать вам разницу с этой реализацией:
body {
  margin: 0;
}
.row {
  display: flex;
  justify-content: space-between;
}
.container {
  display: inline-block;
  margin: 5px;
  width: 200px;
  height: 200px;
  background: tomato;
}
.inner {
  position: relative;
  margin: 0 auto;
  height: 50%;
  width: 50%;
  background: #FFC4BA;
}
.inner.small {
  width: 25%;
  height: 25%;
}
.inner.big {
  width: 75%;
  height: 75%;
}
.percent {
  top: 25%
}
.transform {
  top: 50%;
  transform: translateY(-50%);
}
<b>First row </b>looks alright, but that's because the gap works well with the 25%
<div class="row">
  <div class="container">
    <div class="inner percent"></div>
  </div>
  <div class="container">
    <div class="inner transform"></div>
  </div>
</div>
<b>Second row </b>made the center square a bit smaller, and the 25% now is too high as we'd expect the bottom of the element to reach 75%
<div class="row">
  <div class="container">
    <div class="small inner percent"></div>
  </div>
  <div class="container">
    <div class="small inner transform"></div>
  </div>
</div>
<b>Third row </b>now I've made the center box big and it ends lower than 75% making 25% start too late
<div class="row">
  <div class="container">
    <div class="big inner percent"></div>
  </div>
  <div class="container">
    <div class="big inner transform"></div>
  </div>
</div>

Почему translateY (-50%) необходим для центрирования элемента, который находится вверху: 50%?

4 ответа:

top: 0 (по умолчанию)

top: 50%

top: 50%; transform:translateY(-50%);

что вы подразумеваете под "позицией якорь"?

как выглядит привязка позиции?

Родитель Анкеровки

Top

Нижние Анкеровки

Левый Якорь

Правый Якорь

Привязка Ребенка

Вертикальное Выравнивание

Горизонтального Выравнивания

Центр Крепежных