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

Question

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?

This is a neat way of centering the element in stead of using margin if we don't know the height and width of the container — Debabrata, Commented Sep 12, 2017 at 20:02
@Debabrata -- That much I know, and, in theory, I understand the concept of moving something left and top 50%, but the negative move back with the transform, would you be able to flesh that out a little for me? — Theodore Steiner, Commented Sep 12, 2017 at 20:04
The -50% transform basically means, in simple words, "move this element left and upwards by 50% of the computed dimension along the axis". -50% along the x-axis means "move me leftwards by half my computed width", likewise for that in the y-axis. The reason why this is needed is because when setting top: 50%; left: 50% of the element, you are moving the top left corner of the element to the center of its parent. The center of the element, though, does not line up with the center of its parent. — Terry, Commented Sep 12, 2017 at 20:06
@Terry -- Thanks Terry, that really cleared it up for me! If you want to throw that in an actual response I'll mark it as answered/correct. — Theodore Steiner, Commented Sep 12, 2017 at 20:11
@TheodoreSteiner You're welcome! I have also updated my answer with an illustrative, interactive example so that you can see what's going on "behind-the-scenes" :) — Terry, Commented Sep 12, 2017 at 20:20

Peter Mortensen · Accepted Answer · 2022-12-09 11:58:21Z

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>

This makes a lot of sense now. Thanks. I feel like it would make more sense for elements to have anchor points that you can set, but I think that this is effectively the same thing. — Tim, Commented May 20, 2020 at 2:52

InSync · Accepted Answer · 2023-06-02 20:31:59Z

9

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.

edited Jun 2, 2023 at 20:31

InSync

8,6194 gold badges12 silver badges42 bronze badges

answered Oct 21, 2020 at 9:27

Kevin Chandra

7151 gold badge12 silver badges16 bronze badges

Add a comment |

Ajay Mahiwal · Accepted Answer · 2023-09-04 06:21:40Z

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: