为什么translateY（-50％）需要将顶部的元素居中：50％？ [英] Why is translateY(-50%) needed to center an element which is at top: 50%?

问题描述

  .element {
 position：relative; 
 top：50％; 
 transform：translateY（-50％）; 
} 
  

问题是为什么？我的第一个想法是父元素包含多个视口。我使我的父视口高度等于 100vh 和宽度 100％。这没有工作。我仍然需要平移或负边距偏移。为什么当父元素设置为 margin：0; 时，我需要一个负偏移量？

解决方案

top：0 （默认值）

默认情况下，您的元素位于页面的顶部，元素的顶部位于0：

  --------页首-------- 
 {element} 
 
 
 ------页的中间------ 
 
 
 
 ------页面底部------ 
  

top：50％

将其向下移动50％的高度（整个页面的50％），元素的顶部位于50％的标记，意味着元素从50％开始并且不居中。

  --------页首-------- 
 
 
 
  - -----页中间------ 
 {element} 
 
 
 ------页面底部------ 
  

top：50％ transform：translateY（-50％）;

当元素的顶部位于中间标记处时，我们可以将元素向上移动自身高度的一半将其与整个页面对齐。这正是 transform：translateY（-50％）; 的作用：

  --------页首-------- 
 
 
 
 {element}  - 页面的中间 -  
 
 
 
 ------底部------ 
  

但是为什么我们不能说 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;身高：50％ width：50％; background：＃FFC4BA;}。inner.small {width：25％;高度：25％;}。高度：75％;}。百分比{top：25％}。 transform：translateY（-50％）;}  

  b>第一行< / b>看起来不错，但这是因为这个差距适用于25％< div class =row> < div class =container> < div class =inner percent>< / div> < / div> < div class =container> < div class =inner transform>< / div> < / div>< / div>< b>第二行< / b>使中心方块稍小，而现在的25％太高了，因为我们预期元素的底部达到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>第三行< / b>现在我已将中心框设置为大，并且结束低于75％，使25％开始太晚< div class =row > < div class =container> < div class =big inner percent>< / div> < / div> < div class =container> < div class =big inner transform>< / div> < / div>< / div>  

I can see that this code works to align a div vertically within its 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?

解决方案

top:0 (default)

By default, your element is at the top of the page, and 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% height (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 halfway mark, we can move the element back up by half of its own height to center it with the whole page. That's exactly what transform:translateY(-50%); does:

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



{element}-Middle of Page---



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

But why can't we just say top: 25% or something like that? I've made a quick snippet to show you the difference with that implementation:

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％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！