title: How to vertically and horizontally center a component in react?
body: <p>How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?</p>
  
  <pre><code>  render() {
        return (&lt;ComponentASD 
          style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)'
        }} /&gt;);
      }
  </code></pre>