fancy text within circle css, alignments [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm trying to show a text inside a circle and I found the following code.
The problem is that I would like:
the circle aligned horizontally in the center of the page
the text aligned vertically in the middle of the circle
JsFiddle here
code:
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle ;) */
width: 8em;
height: 8em;
/* and let's turn the square into a circle */
border-radius: 100%;
vertical-align: middle;
}
<div class="fancy">something</div>

Answer 1

You can use a flexbox to center the circle, and the text inside:
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100vh; /* so the body would fill the height */
}
.fancy {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 1em;
border: 0.5em solid black;
width: 8em;
height: 8em;
border-radius: 100%;
vertical-align: middle;
justify-content: center;
}
<div class="fancy">something</div>
If you want to center the element without styling the body, you can use absolute positoning and transform:
.fancy {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 1em;
border: 0.5em solid black;
width: 8em;
height: 8em;
border-radius: 100%;
vertical-align: middle;
justify-content: center;
}
<div class="fancy">something</div>

Answer 2

You can use line-height to where line-height will be equal to the full height to center it
.fancy {
/* Within a circle, centered text looks prettier. */
text-align: center;
line-height: 8em;
/* Let's avoid our text touching the border. As
our text will still flow in a square, it looks
nicer that way, giving the feeling that it's a "real"
circle. */
padding: 1em;
/* The border will make the circle visible.
You could also use a background, as
backgrounds are clipped by border radius */
border: 0.5em solid black;
/* Let's make sure we have a square.
If it's not a square, we'll get an
ellipsis rather than a circle ;) */
width: 8em;
height: 8em;
/* and let's turn the square into a circle */
border-radius: 100%;
vertical-align: middle;
}
<div class="fancy">something</div>