CODEWITHSUNDEEP
htmlcsslayout
Theodore Steiner
Theodore Steiner

Reputation: 1615

Transform: translate(-50%, -50%)

When working with hero images or full screen anything, I typically see text or images with the following bit of CSS:

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

What is this code actually doing?

Upvotes: 63

Views: 175186

Answers (3)

Ajay Mahiwal
Ajay Mahiwal

Reputation: 151

All Above Answers are correct, But One thing is missing which is Visualization. Humans mind can easy understand by images and remember very well.

So here are some images which help you to understand this Question concept in a better way:

First of all, I want to tell something that why we use these lines of code ?

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

It helps us to center a item or element. So when using top:50% we are moving our element 50% from the top and when using left:50% we are moving element 50% from the left. The transfrom translate property used then it changes the position of element from its current location(place) and we are doing -50% from x axis and y axis of that element. After all your target element will place at center.

Now you will understand by images Let's Start: enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Code Visualization

Upvotes: 10

Kevin Chandra
Kevin Chandra

Reputation: 715

TL;DR version

Let's say there is a .container and an .item inside.

This code below is positioning .item relatively to .container; meaning .item top left corner is in the center of its container

.item {
  top: 50%;
  left: 50%;
}

While the below is positioning .item relatively to its own width and height; meaning minus 50% of its width and height.

.item {
  transform: translate(-50%, -50%);
}

If the two code snippets below are combined, then the expected center will show up.

Upvotes: 9

Terry
Terry

Reputation: 66218

The reason why transform: translate(-50%, -50%) is required is because you want the center of the element to line up with the center of its parent. In simple terms, it can be boiled down to translateX(-50%) translateY(-50%), which means:

  • move me leftwards by 50% of my width, along the x-axis, and
  • move me upwards by 50% of my height, along the y-axis

This effectively moves the center of the element to its original top left corner. Remember then when you set left: 50%; top 50% on the element, you are moving its top left corner to the center of its parent (which means it is not visually centered at all). By moving the element back leftwards and upwards by half of its width and height respectively, you are sure that its center now aligns with the parent's center, making it visually horizontally + vertically centered.

As a proof of concept, see the code snippet below: hover over the parent to cause the child element's "ghost" to reposition itself by means of transform: translate(-50%, -50%):

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}
<div class="parent">
  <div class="child"></div>
</div>

Upvotes: 101

Related Questions