Why do we need a translation (-50%) to center the element that is on top: 50%?

Question

I see that this code works to align the div vertically inside its parent element:

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

The question is why? My first thought was that the parent element covers more than the viewport. I made the parent viewing height 100vh and 100% width. This did not work. I still need a translation or a negative bias. Why do I need a negative offset if the parent element is set to margin: 0; ? Is it because of the calculated difference that I don't take into account?

Answer 1

top: 0 (default)

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

 --------Top of Page-------- {element} ------Middle of Page------ ------Bottom of Page------ 

top: 50%

When you move it 50% of the height (50% of the entire page), the top of the element is at 50%, that is, the element starts at 50% and is not centered.

 --------Top of Page-------- ------Middle of Page------ {element} ------Bottom of Page------ 

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

When the top of the element is halfway, we can move the element half its height to center it on the entire page. 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 made a quick snippet to show you the difference with this 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 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> 

Answer 2

While others replied that -50 moves the inner element half its own height, I thought this little animation showing movement up to top: 50%; , and then transform: translateY(-50%); second may 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> 

Answer 3

 position: relative; top: 50%; 

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

Since the default position places the top of the inner element at the top of the outer element, this places the top of the inner element in the middle of the outer element.

 transform: translateY(-50%); 

This moves the inner element back half the height of the inner element.

Their combination puts the middle of the inner element in the middle of the parent element.

Answer 4

Why is a translation offset of -50% required for a 50% value?

Instead of directly answering this question, I am going to answer a more general question:

How does position snapping work in CSS?

I hope that by answering the question as a whole, you will understand the parts that are applicable to your specific case.

---

What do you mean by "position fixation"?

Pinning is when the DOM node is positioned in such a way that it is bound to its parent in this dimension. If the upper left of the node is anchored to the upper left edge of its parent, the nodes will remain aligned in the upper left corner, regardless of the size of any element.

What does position snapping look like?

I am going to use the template for all further examples, so it is important to understand the basic 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 the parent .container , which has dark red, dark yellow, dark green, and blue quadrants to easily view alignment. Inside, it contains a .box , which has red, yellow, green, and blue quadrants to show contrast for alignment.

All additional examples will have this template miniature code to make the corresponding code stand out more.

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

Parental binding

Parental binding can be configured using the top , bottom , left and right properties of the child.

Top

Using the top property will snap the top edge of the child to the top edge of the parent.

Assuming bottom not set, top: 0 will not display otherwise than the default value 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 percent aligns the top edge of the child with the specified percentage of the parent's vertex.

top: 50% is the middle of the parent element:

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

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

A bottom pin will snap 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, and the child is aligned opposite 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 element:

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

The left property will snap the left edge of the child to the left edge of the parent.

Assuming right not set, left: 0 will not display otherwise than the default value left: auto .

left: 50% is the middle of the parent element:

 .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 from the right side of the parent.

Correct binding

The right property binds the right edge of the child to the right edge of the parent:

right: 50% is the middle of the parent element, and the child element is aligned opposite 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 the child hanging from the left side of the parent.

Child reinforcement

The child’s reinforcement can be adjusted independently of the parental reinforcement using the transform property. In particular, the translate , translateX and translateY functions will be used to set the child window to use a different alignment.

The reason for this is that the percentages in the translate value refer to the child, and the percentages in the top , bottom , left and right properties refer to the parent.

Vertical alignment

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

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

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

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

Similarly, when the child is anchored to the bottom of the parent, transform: translate(50%) center the child:

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

It also means that top: 100% equivalent to bottom: 0; transform: translateY(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 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%) center the child:

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

Similarly, when the child is anchored to the right of the parent, transform: translateX(50%) center the child:

 .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% equivalent to right: 0; transform: translateX(100%) right: 0; transform: translateX(100%) .

Central binding

Centering is just a matter of aligning the child to the middle of the parent, and then pushing the parental 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> 

Due to symmetry, you can also use:

 bottom: 50%; right: 50%; transform: translate(50%, 50%);