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

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



.element {

  position: relative;

  top: 50%;

  transform: translateY(-50%);

}


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

505   4  

4 ответов:

Сверху: 0 (по умолчанию)

По умолчанию ваш элемент находится в верхней части страницы, а верхняя часть элемента находится в 0: 

--------Top of Page--------
{element}


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



------Bottom of  Page------

Топ: 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>
131  
2016-11-10 23:19:54

В то время как другие дали ответ, что -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  
2016-11-10 23:21:54 
position: relative;
top: 50%;

... перемещает элемент вниз на расстояние, равное половине высоты родительского элемента.

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

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

29  
2016-11-10 16:35:50

Почему топ-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 приведет к привязке верхнего края дочернего элемента к верхнему краю родительского элемента.

Предполагая, что 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>

Левый Якорь

Свойство

Будет привязывать левый край дочернего элемента к левому краю родительского элемента.

Предполагая, что 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  
2016-11-11 18:40:40

Comments

    Ничего не найдено.
Click here to cancel reply.