왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

Nice programing

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

nicepro 2020. 10. 22. 22:44

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

이 코드가 부모 요소 내에서 div를 세로로 정렬하는 것을 볼 수 있습니다.

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

그 이유는 무엇입니까? 내 첫 번째 생각은 부모 요소가 뷰포트보다 더 많이 포함된다는 것입니다. 부모 뷰포트 높이를 같게 100vh하고 너비를 설정했습니다 100%. 작동하지 않았습니다. 여전히 번역 또는 음수 여백 오프셋이 필요했습니다. 부모 요소가로 설정된 경우 음수 오프셋이 필요한 이유는 무엇 margin: 0;입니까? 고려하지 않은 계산 된 마진 때문입니까?

top : 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------

상단 : 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>

다른 사람들은 -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>

position: relative;
top: 50%;

… 요소를 상위 높이의 절반만큼 아래로 이동합니다.

기본 위치는두고 이후 상부 상기 내부 소자를 상부 외주 요소이 두는 상단 상기 내측 부재의 중간 외측 소자.

transform: translateY(-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>

왼쪽 앵커

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% 아이가 부모의 오른쪽에 매달려있게합니다.

오른쪽 앵커링

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% leaves teh child hanging off the left side of the parent.

Child Anchoring

Child anchoring can be adjusted independently from parent anchoring by making use of the transform property. Specifically the translate, translateX, and translateY functions will be used to bump the child box to use a different alignment.

The reason this works is because percentages in the translate value are relative to the child, while percentages in the top, bottom, left, and right properties are relative to the parent.

Vertical Alignment

Using transform: translateY(), the alignment of the child can be bumped up or down.

transform: translateY(0) will leave the child where it is, and is generally not very useful.

When the child is anchored to the top of the parent, transform: translateY(-50%) will align the child at its center:

.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>

Likewise, when the child is anchored to the bottom of the parent, transform: translate(50%) will align the child at its center:

.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>

This also means that top: 100% is equivalent to 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>

Horizontal Alignment

Using transform: translateX(), the alignment of the child can be bumped left or right.

transform: translateX(0) will leave the child where it is by default.

When the child is anchored to the left of the parent, transform: translateX(-50%) will align the child at its center:

.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>

Likewise, when the child is anchored to the right of the parent, transform: translateX(50%) will align the child at its center:

.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% is equivalent to right: 0; transform: translateX(100%).

Center Anchoring

Centering is just a matter of aligning the child to the middle of the parent, and then bumping the child's origin into place.

.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>

Because of the symmetry, you could also use:

bottom: 50%;
right: 50%;
transform: translate(50%, 50%);

참고URL : https://stackoverflow.com/questions/40530101/why-is-translatey-50-needed-to-center-an-element-which-is-at-top-50

'Nice programing' 카테고리의 다른 글

컴파일 타임에 런타임 다형성을 해결할 수없는 이유는 무엇입니까? (0)	2020.10.22
Facebook SDK : URL 체계로 등록되지 않은 앱 (0)	2020.10.22
목록보기 콘텐츠를 지우시겠습니까? (0)	2020.10.22
What is the cause of the Bad Request Error when submitting form in Flask application? (0)	2020.10.21
Standard to follow when writing git commit messages (0)	2020.10.21

현재글왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

nicepro

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

top : 0 (기본값)

상단 : 50 %

상단 : 50 %; transform : translateY (-50 %);

"위치 고정"이란 무엇을 의미합니까?

위치 고정은 어떻게 생겼습니까?

부모 정박

상단

하단 고정

왼쪽 앵커

오른쪽 앵커링

Child Anchoring

Vertical Alignment

Horizontal Alignment

Center Anchoring

'Nice programing' 카테고리의 다른 글

'Nice programing'의 다른글

티스토리툴바

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

왜 translateY (-50 %)가 상단 50 %에있는 요소를 중앙에 배치해야합니까?

top : 0 (기본값)

상단 : 50 %

상단 : 50 %; transform : translateY (-50 %);

"위치 고정"이란 무엇을 의미합니까?

위치 고정은 어떻게 생겼습니까?

부모 정박

상단

하단 고정

왼쪽 앵커

오른쪽 앵커링

Child Anchoring

Vertical Alignment

Horizontal Alignment

Center Anchoring

'Nice programing' 카테고리의 다른 글

'Nice programing'의 다른글

관련글

티스토리툴바