CSS circle with dynamic text inside - css

Question

I need to build a circle shape (in css) which has 2 lines of text that could change in length based on translation selected and always centered.
So far I have this:
h3 {
background-color: #fcd141;
border-radius: 50%;
padding: 12px 5px 5px 5px;
margin-top: 30px;
width: 20%;
height: 20%;
}
<h3>
<span style="vertical-align: middle;">98%</span>
<span style="margin-top: -4px; display: block;">Ratingfasdasfasfsad</span>
</h3>
The circle needs to respond dynamically to the length of the text keeping the aspect ration intact.

Answer 1

You can have a look at the code as in your code it looks like an ellipse to me
.circle-text {
width: 50%;
padding 10px;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background: #4679BD;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle-text div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: white;
}
<div class="circle-text">
<div>I'm asddddddssssssssssssssssssasdasdashd asfafjsldfashdfisdpf sdjf pe!</div>
</div>

Answer 2

You could use vw (view width units) for this:
note
transform is used for vertical alignment only.
h3 {
background-color: #fcd141;
border-radius: 50%;
padding: 20px;
margin-top: 30px;
width: 20vw;
height: 20vw;
text-align: center;
word-wrap: break-word;
position: relative;
}
h3 span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<span> 98% <br />
Ratingfasdasfasfsad</span>
</h3>
I was also able to remove your inline styling, and combined your two spans into one.