Html 为什么需要 translateY(-50%) 将顶部的元素居中：50%？

Why is translateY(-50%) needed to center an element which is at top: 50%?

提问by ltrainpr

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

我可以看到此代码用于在其父元素内垂直对齐 div：

.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 100vhand 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?

问题是为什么？我的第一个想法是父元素包含的不仅仅是视口。我让我的父视口 height100vh和 width相等100%。那没有用。我仍然需要平移或负边距偏移。当父元素设置为 时，为什么我需要负偏移量margin: 0;？是因为我没有考虑计算的保证金吗？

回答by Andrew Bone

top:0 (default)

顶部：0 （默认）

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

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

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


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



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

top:50%

顶部：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.

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

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



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


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

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

顶部：50%；变换：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:

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

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

但是为什么我们不能就这样说呢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>

回答by JonSG

While others have provided the answer that the -50 moves the inner element back up half it's own height, I thought this little animation showing the movement to top: 50%;first, followed by transform: translateY(-50%);second, might help.

虽然其他人提供的答案是 -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>

回答by Quentin

position: relative;
top: 50%;

position: relative;
top: 50%;

… moves the element down a distance equal to half the height of the parent.

… 将元素向下移动等于父元素高度一半的距离。

Since the default position puts the topof the inner element at the topof the outer element, this puts the topof the inner element at the middleof the outer element.

由于默认位置放顶部的内元件在顶部外的元素，这使顶部在内部元件的中间外元件。

transform: translateY(-50%);

transform: translateY(-50%);

This moves the inner element back up a distance of half the height of the innerelement.

这使内部元件备份的高度的一半的距离内元件。

Combining them puts the middleof the inner element at the middleof the parent element.

结合他们提出的中间内部元件在中间的父元素。

回答by zzzzBov

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

为什么前 50% 需要 -50% 的平移偏移量？

Rather than answering this question directly, I'm going to answer the more general question of:

与其直接回答这个问题，不如回答一个更普遍的问题：

How does position anchoring work in CSS?

CSS 中的位置锚定是如何工作的？

Hopefully, in answering the question generally, you'll understand the parts that apply to your specific case.

希望在一般性地回答问题时，您会了解适用于您的特定案例的部分。

---

---

What do you mean by "position anchoring"?

“位置锚定”是什么意思？

Position anchoring is when a DOM node is positioned in a way that it is "anchored" to its parent in a given dimension. If the top left of the node is anchored to the top left of its parent, the nodes will stay aligned at their top left corner, no matter the size of either element.

位置锚定是指 DOM 节点在给定维度中以“锚定”到其父节点的方式定位。如果节点的左上角锚定在其父节点的左上角，则节点将在其左上角保持对齐，无论任一元素的大小如何。

What does position anchoring look like?

位置锚定是什么样的？

I'm going to use a template for all further examples, so it's important to understand the base example.

我将在所有其他示例中使用模板，因此了解基本示例非常重要。

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

This example shows a parent .containerwhich has dark red, dark yellow, dark green, and dark blue quadrants to easily view alignment. Inside, it contains a .boxwhich has red, yellow, green, and blue quadrants to show contrast for the alignment.

此示例显示.container具有深红色、深黄色、深绿色和深蓝色象限的父级，以便轻松查看对齐情况。在里面，它包含一个.box具有红色、黄色、绿色和蓝色象限的 a，以显示对齐的对比度。

All further examples will have this boilerplate minified to make the relevant code stand out more.

所有进一步的示例都将缩小此样板，以使相关代码更加突出。

Note that by default, the top left of the child is anchored to the top left of the parent.

请注意，默认情况下，子项的左上角锚定到父项的左上角。

Parent Anchoring

家长锚定

Parent anchoring can be adjusted by using the top, bottom, left, and rightproperties on the child element.

父锚固可以通过使用被调整top，bottom，left，和right子元素的属性。

Top

最佳

Using the topproperty will anchor the top edge of the child to the top edge of the parent.

使用该top属性会将子项的顶部边缘锚定到父项的顶部边缘。

Assuming bottomisn't set, top: 0won't show differently than the default of top: auto

假设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>

Using a percentage will align the top edge of the child at the given percentage from the top of the parent.

使用百分比将使子项的顶部边缘与父项顶部的给定百分比对齐。

top: 50%is the middle of the parent:

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%is the bottom of the parent:

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>

Bottom Anchoring

底部锚固

Bottom anchoring will anchor the bottom edge of the child to the bottom edge of the parent:

底部锚定会将子项的底部边缘锚定到父项的底部边缘：

.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%is the middle of the parent, with the child aligned opposite from top: 50%:

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%is the top of the parent:

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 Anchoring

左锚

The leftproperty will anchor the left edge of the child to the left edge of the parent.

该left属性会将子项的左边缘锚定到父项的左边缘。

Assuming rightisn't set, left: 0won't show differently than the default of left: auto.

假设right未设置，left: 0则不会显示与默认值不同的left: auto.

left: 50%is the middle of the parent:

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

left: 100%让孩子挂在父母的右侧。

Right Anchoring

右锚

The rightproperty will anchor the right edge of the child to the right edge of the parent:

该right属性将子元素的右边缘锚定到父元素的右边缘：

right: 50%is the middle of the parent, with the child aligned opposite from left: 50%:

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.

right: 100%让孩子挂在父母的左侧。

Child Anchoring

儿童锚定

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

通过使用transform属性，可以独立于父锚定调整子锚定。具体来说translate，translateX、 和translateY函数将用于碰撞子框以使用不同的对齐方式。

The reason this works is because percentages in the translatevalue are relative to the child, while percentages in the top, bottom, left, and rightproperties are relative to the parent.

这部作品的原因是因为在百分比translate值是相对于孩子，而在百分比top，bottom，left，和right属性是相对于父。

Vertical Alignment

垂直对齐

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

使用transform: translateY()，子项的对齐可以上下颠簸。

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

transform: translateY(0)会把孩子留在原地，而且通常不是很有用。

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

当孩子被锚定到父母的顶部时，transform: translateY(-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: 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:

同样，当孩子被锚定到父母的底部时，transform: translate(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: 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%):

这也意味着top: 100%相当于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()，可以向左或向右碰撞孩子的对齐方式。

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

transform: translateX(0)会将孩子留在默认情况下。

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

当孩子被锚定在父母的左边时，transform: translateX(-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 {
  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:

同样，当孩子被锚定在父母的右侧时，transform: translateX(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: 0;
  transform: translateX(50%);
}

<div class="container">
  <div class="box"></div>
</div>

left: 100%is equivalent to right: 0; transform: translateX(100%).

left: 100%相当于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%);