How can I make transform:translate work to make an element centered on screen?

Question

I couldn't find a solution for this simple problem, I changed the display to flex and block, that didn't work either. It works on parent element. But I guess there is something I can't see on this code.

.planets {
  display: flex;

  height: 100vh;
}
.pluton-orbit {
  display: inline-block;
  width: 70rem;
  height: 70rem;
  border: 1px solid rgba(0, 0, 0, 0.219);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 4;
  animation: Rotation 5s linear infinite;
}

the transform here, doesn't work. I know how to center, my question is why doesn't the transform property work. this is react with Sass by the way. Everything else works in the code, just the transform. here is the component.

import React from "react";

const Planets: React.FC = () => {
  return (
    <div className="planets">
      <div className="pluton-orbit">
        <div className="pluton"></div>
      </div>
      <div className="neptun-orbit">
        <div className="neptun"></div>
      </div>
    </div>
  );
};

export default Planets;

CSS alone barely tells us anything. When you ask these types of questions, please always provide a _proper_ [mre] of the issue. — CBroe, Mar 02 '21 at 11:14

Yoav Kadosh · Answer 1 · 2021-03-02T12:20:30.020

0

Use the following CSS:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

The top: 50%; left: 50%; positions the element's top/left corner at the center of the closest positioned ancestor. Then, the transform: translate(-50%, -50%); moves the element up and to the left by 50% of the element's size.

If you apply animation that alters the transform property, make sure you merge it with the initial transform value, since it will override the entire transform rule for that element. For example:

.element {
  transform: translate(-50%, -50%);
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  from {transform: rotate(0deg) translate(-50%, -50%)}
  to {transform: rotate(180deg) translate(-50%, -50%)}
}

Here's a fiddle

edited Mar 02 '21 at 12:20

answered Mar 02 '21 at 11:13

Yoav Kadosh

3,683
4
29
54

so transform here doesn't work for some reason. – İlker Mar 02 '21 at 11:16
@İlker I added a fiddle – Yoav Kadosh Mar 02 '21 at 11:19
I edited the question, my problem is everything works but transform. – İlker Mar 02 '21 at 11:44
@İlker I see that you are using `rem` units for the `width/height`. This unit is based on the `font-size` and may cause you some issues. Try using pixels instead. – Yoav Kadosh Mar 02 '21 at 12:09
Yes but I fixed the font-size to 62.5% in html so I know exactly the pixel values. I just comment out the animation and it worked. The animation Rotation and transform doesn't work together for some reason. – İlker Mar 02 '21 at 12:13
@İlker Right, if your animation has something like `transform: rotate(...)` you will need to change it to `transform: rotate(...) translate(-50%, -50%)` because it overrides the entire `transform` rule for that element. – Yoav Kadosh Mar 02 '21 at 12:15
yes okay, thank you. I figured it out, it's how you said :) – İlker Mar 02 '21 at 12:16

score -1 · Answer 2 · edited Mar 25 '21 at 04:42

-1

give position absolute to element and

top:50%;

left:50%;

transform:translate(-50%,-50%);

edited Mar 25 '21 at 04:42

Yatin

2,348
6
20
38

answered Mar 02 '21 at 11:14

Abhimanyu Sharma

196
1
9

How can I make transform:translate work to make an element centered on screen?

2 Answers2