title: How can I make transform:translate work to make an element centered on screen?
body: <p>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.</p>
  <pre><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;
  }
  </code></pre>
  <p>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.</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Planets: React.FC = () =&gt; {
    return (
      &lt;div className=&quot;planets&quot;&gt;
        &lt;div className=&quot;pluton-orbit&quot;&gt;
          &lt;div className=&quot;pluton&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div className=&quot;neptun-orbit&quot;&gt;
          &lt;div className=&quot;neptun&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Planets;
  </code></pre>