Text in React-Circular-Progressbar not centered

Question

I am struggling with getting the text to be centered when I create a circular progress bar.

This is the code where the progress bar and text is added.

<div>
  <ProgressBar
     value={80}
     text="80%"
     strokeWidth={5}
     styles={buildStyles({trailColor:"red"})}
  />

This code is the styled portion for the progress bar. Is it possible to center the text to the progress bar

const ProgressBar = styled(CircularProgressbar)`
    width: 100px;
    height: 100px;
`;

This is what the progress bar currently looks like

Answer 1

I believe we can utilize flex here.
On the container that contains the text's tag. You can add.

display: flex;
justify-content: center;
align-items: center;

Just make sure the text is direct child of the container that applied flex style that I mentioned before

Answer 2

The only one method that works for me was that I transform x and y.

.CircularProgressbar-text {
    transform: translate(-15px, 5px);
}