Tại sao cần dịchY (-50%) để căn giữa một phần tử ở trên cùng: 50%?

Question 1

Tôi có thể thấy rằng mã này hoạt động để căn chỉnh một div theo chiều dọc trong phần tử mẹ của nó:

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

Câu hỏi là tại sao? Suy nghĩ đầu tiên của tôi là phần tử mẹ bao gồm nhiều hơn khung nhìn. Tôi đã làm cho chiều cao 100vhvà chiều rộng khung nhìn mẹ bằng nhau 100%. Điều đó đã không hoạt động. Tôi vẫn cần bản dịch hoặc phần bù chênh lệch lợi nhuận âm. Tại sao tôi cần bù trừ âm khi phần tử mẹ được đặt thành margin: 0;? Có phải do tôi không tính đến số tiền ký quỹ không?

Question 2

đầu trang: 0 (mặc định)

Theo mặc định, phần tử của bạn ở đầu trang và đầu phần tử ở 0:

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


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



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

hàng đầu: 50%

Khi bạn di chuyển nó xuống 50% chiều cao (50% của toàn bộ trang), phần trên cùng của phần tử ở mốc 50%, có nghĩa là phần tử bắt đầu ở 50% và không được căn giữa.

--------Top of Page--------



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


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

top: 50%; biến đổi: translateY (-50%);

Khi phần trên cùng của phần tử nằm ở nửa đường, chúng ta có thể di chuyển phần tử lên phía trên một nửa chiều cao của phần tử đó để căn giữa phần tử đó với toàn bộ trang. Đó chính xác là những gì transform:translateY(-50%);:

--------Top of Page--------



{element}-Middle of Page---



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

Nhưng tại sao chúng ta không thể chỉ nói top: 25%hoặc một cái gì đó tương tự? Tôi đã tạo một đoạn mã nhanh để cho bạn thấy sự khác biệt với cách triển khai đó:

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>

Tại sao cần dịchY (-50%) để căn giữa một phần tử ở trên cùng: 50%?

đầu trang: 0 (mặc định)

hàng đầu: 50%

top: 50%; biến đổi: translateY (-50%);

Bạn có nghĩa là gì khi "neo vị trí"?

Vị trí neo trông như thế nào?

Neo cha mẹ

Hàng đầu

Neo dưới đáy

Neo trái

Neo phải

Neo trẻ em

Căn chỉnh dọc

Căn chỉnh theo chiều ngang

Trung tâm neo