Why is translateY(-50%) needed to center an element which is at top: 50%?
HtmlCssHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
###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>
Solution 2 - Html
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.
@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>
Solution 3 - Html
> position: relative; > top: 50%;
… moves the element down a distance equal to half the height of the parent.
Since the default position puts the top of the inner element at the top of the outer element, this puts the top of the inner element at the middle of the outer element.
> transform: translateY(-50%);
This moves the inner element back up a distance of half the height of the inner element.
Combining them puts the middle of the inner element at the middle of the parent element.
Solution 4 - Html
> Why does top 50% need a -50% translate offset?
Rather than answering this question directly, I'm going to answer the more general question of:
How does position anchoring work in 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.
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 .container which has dark red, dark yellow, dark green, and dark blue quadrants to easily view alignment. Inside, it contains a .box which has red, yellow, green, and blue quadrants to show contrast for the alignment.
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 right properties on the child element.
Top
Using the top property will anchor the top edge of the child to the top edge of the parent.
Assuming bottom isn't set, top: 0 won't show differently than the default of 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:
.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:
.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%:
.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:
.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 left property will anchor the left edge of the child to the left edge of the parent.
Assuming right isn't set, left: 0 won't show differently than the default of left: auto.
left: 50% is the middle 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 {
left: 50%;
}
<div class="container">
<div class="box"></div>
</div>
left: 100% leaves the child hanging off the right side of the parent.
Right Anchoring
The right property will anchor the right edge of the child to the right edge of the parent:
right: 50% is the middle of the parent, with the child aligned opposite from 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.
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%);
}
<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:
.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%):
.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(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%);
}
<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:
.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%).
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%);