Align circles in the center on mobiles - css

Question

I'm trying to align circles in the center on mobile. Here is what I've used on https://www.wmhi.com.au/elite-edge-leadership-resilience/
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
.circle:hover {
background-color:#79c852;
color:white;
}
I need to keep the texts as laid there now (inline-block). The circles are appearing left aligned on mobile phones. Any help would be highly appreciated.
Thanks in advance :)

Answer 1

Kindly change your CSS from
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
to this
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: block;
padding-top: 10px;
margin: auto;
}
And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.

Answer 2

try following code for good design some change for good design please add one div for all content vertically center when you add one line code or more than large content set vertically center also your circle center in mobile.
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: table;
margin: 0 auto;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.circle h2 {
margin-top: 0;
margin-bottom: 15px;
}
.circle p {
margin: 0;
}
.circle:hover {
background-color:#79c852;
color:white;
}
<div class="wpb_wrapper">
<div class="circle">
<div class="vertical-center">
<h2 class="w-h2">
<span style="color: #ffffff;">Step 3</span>
</h2>
<p>Run the popular Elite Edge training</p>
</div>
</div>
</div>

Answer 3

add the div before the circle class. like this and it will resolve the problem
<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
<div style="margin:0 auto;text-align:center;">
<div class="circle">
<h2><span style="color: #ffffff;">Step 1</span></h2>
<p>Tell us your team’s resilience and leadership goals</p>
</div>