ltrainpr ltrainpr - 28 days ago 3
CSS Question

Why does top 50% need a -50 translate offset?

I can see that this code works to a align a div vertically within it's parent element:

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


The question is why? My first thought was that the parent element encompassed more than the viewport. I made my parent viewport height equal
100vh
and width 100%. That did not work. I still needed the translate or a negative margin offset. Why do I need a negative offset when the parent element is set to
margin 0
? Is it because of a computed margin that I'm not taking into account?

I feel like this is one of those common knowledge things that I'm unaware of. Thank you for the help.

Answer

top:0 (default)

By default your element is at the top of the page, the top of the element is at 0

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


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



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

top:50%

When you move it down by 50% (of the entire page) the top of the element is at the 50% mark, meaning the element starts at 50% and is not centered.

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



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


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

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

when the top of the element is at the half way mark we can move the element back up by half of its own height to center it with the whole page.and that's exactly what transform:translateY(-50%);

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



{element}-Middle of Page---



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

I hope this makes sense.

EDIT

You asked why we can't just say top: 25% or something like that. So I've made a quick snippet to show you the difference.

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>