How to make text in responsive circle <div> responsive as well - html

Question

I have dealt with this problem for some days now and it's making me crazy, I want the text inside the circle to move in the same position inside the cirkle div when I make the screen smaller, as illustrated in the picture.
If you have any tips please share!
CSS Code and Html Code:
.circleBase {
border-radius: 50%;
}
.contact-circle {
margin-top: 29%;
margin-left: 4%;
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 20%;
bottom: 20%;
left: 18%;
font-size: auto;
position: absolute;
text-align: center;
width: 60%;
opacity: 1;
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>

Answer 1

Use another method to center the text. Here is an idea with flex:
.circleBase {
border-radius: 50%;
}
.contact-circle {
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 0;
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>

Answer 2

Responsive web site - #media (min-width:450px) and (max-width:900px) { css style }
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
Css #media Example
.circleBase {
height:800px;
width:800px;
}
#media (max-width:479px) {
.circleBase {
height: 400px;
width:400px;
}
}