Some of solutions here didn't work well for me on small circles. So I made this solution using ol absolute position.
Using SASS will look like this:
.circle-text {
position: relative;
display: block;
text-align: center;
border-radius: 50%;
> .inner-text {
display: block;
@extend .center-align;
}
}
.center-align {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@mixin circle-text($size) {
width: $size;
height: $size;
@extend .circle-text;
}
And can be used like
#red-circle {
background-color: red;
border: 1px solid black;
@include circle-text(50px);
}
#green-circle {
background-color: green;
border: 1px solid black;
@include circle-text(150px);
}
See demo on https://codepen.io/matheusrufca/project/editor/DnYPMK
See the snippet to view output CSS
.circle-text {_x000D_
position: relative;_x000D_
display: block;_x000D_
border-radius: 50%;_x000D_
text-align: center;_x000D_
min-width: 50px;_x000D_
min-height: 50px;_x000D_
}_x000D_
_x000D_
.center-align {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
margin: auto;_x000D_
-webkit-transform: translateX(-50%) translateY(-50%);_x000D_
-ms-transform: translateX(-50%) translateY(-50%);_x000D_
transform: translateX(-50%) translateY(-50%);_x000D_
}<div id="red-circle" class="circle-text">_x000D_
<span class="inner-text center-align">Hey</span>_x000D_
</div>_x000D_
_x000D_
<div id="green-circle" class="circle-text">_x000D_
<span class="inner-text center-align">Big size circle</span>_x000D_
<div>_x000D_
<style>_x000D_
#red-circle {_x000D_
background-color: red;_x000D_
border: 1px solid black;_x000D_
width: 60px;_x000D_
height: 60px;_x000D_
}_x000D_
_x000D_
#green-circle {_x000D_
background-color: green;_x000D_
border: 1px solid black;_x000D_
width: 150px;_x000D_
height: 150px;_x000D_
}_x000D_
</style>