那些遇到过的问题

为什么translateY(-50%)需要将一个位于顶部的元素居中:50%？

ltr*_*npr 73 html css css3

我可以看到这段代码可以在其父元素中垂直对齐div:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
Run Code Online (Sandbox Code Playgroud)

问题是为什么？我的第一个想法是父元素包含的不仅仅是视口.我使我的父视口高度相等100vh和宽度100%.那没用.我仍然需要翻译或负边际抵消.当父元素设置为margin: 0;？时,为什么我需要负偏移量？是因为我没有考虑到计算的保证金？

And*_*one 144

顶部:0 (默认)

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

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


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



------Bottom of  Page------
Run Code Online (Sandbox Code Playgroud)

顶部:50%

当您向下移动50%的高度(整个页面的50%)时,元素的顶部是50%标记,这意味着元素从50%开始并且不居中.

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



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


------Bottom of  Page------
Run Code Online (Sandbox Code Playgroud)

顶部:50%; 变换:平移Y(-50%);

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

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



{element}-Middle of Page---



------Bottom of  Page------
Run Code Online (Sandbox Code Playgroud)

但为什么我们不能只说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%);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • TL; DR`top`从页面/容器高度应用50%,`transform:translateY`从自身元素高度应用-50%. (2认同)

Jon*_*nSG 71

虽然其他人已经提供了答案,即-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)}
Run Code Online (Sandbox Code Playgroud) 
<div class="outer">
  <div class="hline"></div>
  <div class="vline"></div>
  <div class="inner"></div>  
</div>
Run Code Online (Sandbox Code Playgroud)

  • 我希望我也能将这个答案标记为已被接受. (3认同)
  • 射击!这是一个很棒的视觉动画.这就是为什么我喜欢前端而不是后端编程.谢谢. (2认同)

Que*_*tin 29 

position: relative;
top: 50%;
Run Code Online (Sandbox Code Playgroud)

...将元素向下移动等于父级高度的一半.

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

transform: translateY(-50%);
Run Code Online (Sandbox Code Playgroud)

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

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

  • "然后我们将子元素移回子元素距离的一半,相当于父元素的25%.这是正确的吗？" - 如果(并且仅当)子元素具有"高度:50%"(或等效),这将是正确的,但问题中的代码中没有任何内容表明孩子的身高是已知的. (3认同)

zzz*_*Bov 8

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

我不是直接回答这个问题,而是回答更一般的问题:

位置锚定如何在CSS中起作用？

希望在回答一般问题时,您将理解适用于您的具体案例的部分.

"位置锚定"是什么意思？

位置锚定是指DOM节点的定位方式,它在给定维度中"锚定"到其父节点.如果节点的左上角锚定在其父节点的左上角,则无论两个元素的大小如何,节点都将在其左上角保持对齐.

位置锚定是什么样的？

我将为所有进一步的示例使用模板,因此理解基本示例非常重要.

.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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

此示例显示父母.container具有深红色,深黄色,深绿色和深蓝色象限,以便轻松查看对齐.在内部,它包含一个.box红色,黄色,绿色和蓝色象限,以显示对齐的对比度.

所有进一步的例子都将这个样板缩小,以使相关代码更加突出.

请注意,默认情况下,子项的左上角锚定在父项的左上角.

父锚定

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

最佳

使用该top属性会将子项的上边缘锚定到父项的上边缘.

假设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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

底部锚定

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

.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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

左锚

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

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

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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

正确锚定

该right属性将子项的右边缘锚定到父项的右边缘:

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%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

right: 100% leaves teh child hanging off the left side of the parent.

Child Anchoring

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

The reason this works is because percentages in the translate value are relative to the child, while percentages in the top, bottom, left, and right properties are relative to the parent.

Vertical Alignment

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

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

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

.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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Likewise, when the child is anchored to the bottom of the parent, transform: translate(50%) will align the child at its center:

.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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

This also means that top: 100% is equivalent to 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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Horizontal Alignment

Using transform: translateX(), the alignment of the child can be bumped left or right.

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

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

.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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Likewise, when the child is anchored to the right of the parent, transform: translateX(50%) will align the child at its center:

.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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

left: 100% is equivalent to 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%);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="box"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Because of the symmetry, you could also use:

bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
Run Code Online (Sandbox Code Playgroud)

  • 关于定位的更一般的答案.也许这将是加强CSS定位文档的好方法.查看编辑http://stackoverflow.com/documentation/css/935/positioning#t=201611111730163945028 (2认同)

归档时间：

查看次数：

21569 次

最近记录：

8 年，10 月 前
相关归档
如何填充100%的剩余高度？ 77
如何更改CSS中的删除/穿透厚度？ 66
IE8中的CSS圆角 58
如何在IE中的<td>上进行"display:block"工作？ 37
Chrome背景附件固定和位置固定元素问题 34
在DOM元素的样式对象发生更改后,您是否可以使用javascript钩子触发器？ 29
如何在VS Code中自动格式化Ruby或.erb文件？ 19
用div分组tr标签真是个坏主意吗？ 17
PIE CSS:rgba背景+框阴影 5
内边界半径不起作用 4
难疑归档
使用CSS更改HTML5输入的占位符颜色 3876
package.json中的波浪号(〜)和插入符号(^)有什么区别？ 3111
如何通过引用传递变量？ 2480
什么时候应该使用static_cast,dynamic_cast,const_cast和reinterpret_cast？ 2367
我是否施放了malloc的结果？ 2318
深度克隆对象 2135
如何显示已上演的更改？ 2034
你什么时候使用git rebase而不是git merge？ 1461
在Ruby on Rails中对nil v.空v.空白的简要解释 1098
网格布局上的手势检测 1076