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

Question 1

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

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

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

Question 2

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>

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

top : 0 (기본값)

상단 : 50 %

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

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

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

부모 정박

상단

하단 고정

왼쪽 앵커

오른쪽 앵커링

어린이 정박

수직 정렬

수평 정렬

센터 앵커링