title: Centering inner text, and text inside my circles
body: <p>Edit: I have managed to centered the text for outer circles using, but still having trouble with the main text <code>primary industry...</code></p>
  <pre><code>position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  </code></pre>
  <p>I have a bunch of circles being dynamically rendered.</p>
  <p>I'm trying to get <code>primary industry ...</code> text to be centered of all the circles</p>
  <p>Here's how it actually looks</p>
  <p><a href="https://i.stack.imgur.com/gq5zl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gq5zl.png" alt="enter image description here" /></a></p>
  <p>I've tried to replicate the behaviour in codepen but the layout is slightly off</p>
  <p><a href="https://codesandbox.io/embed/circles-88tzy?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/circles-88tzy?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  <p>My real code looks like this</p>
  <pre><code>const CircleMenu = ({ question }) =&gt; {
    
  
    const graph = useRef(null)
  
    useEffect(() =&gt; {
      const circlegraph = graph.current
      const circleElements = circlegraph.childNodes // not an array
  
      let angle = 360 - 90
      let dangle = 360 / circleElements.length
  
      for (let i = 0; i &lt; circleElements.length; i++) {
        let circle = circleElements[i]
        angle += dangle
        circle.style.transform = `rotate(${angle}deg) translate(${circlegraph.clientWidth /
          2}px) rotate(-${angle}deg)`
      }
    }, [])
  
    return (
      &lt;Container&gt;
        &lt;CenterText&gt;{question.primaryCircle.text}&lt;/CenterText&gt;
        &lt;CircleContainer&gt;
          &lt;div className=&quot;circlegraph&quot; ref={graph}&gt;
            {question.choices.map(item =&gt; (
              &lt;div className=&quot;circle&quot; key={item.id}&gt;
                &lt;p&gt;{item.text}&lt;/p&gt;
              &lt;/div&gt;
            ))}
          &lt;/div&gt;
        &lt;/CircleContainer&gt;
      &lt;/Container&gt;
    )
  }
  
  const CenterText = styled.p`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  `
  
  const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
  `
  
  const CircleContainer = styled.div`
    .circlegraph {
      position: relative;
      width: 500px;
      height: 500px;
      margin: calc(100px / 2 + 0px);
    }
  
    .circlegraph:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      /* border: 2px solid teal; */
      width: calc(100% - 2px * 2);
      height: calc(100% - 2px * 2);
      border-radius: 50%;
    }
  
    .circlegraph .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      margin: calc(-100px / 2);
      background: teal;
      border-radius: 50%;
    }
  </code></pre>
  <p>`</p>