fancy text within circle css, alignments

Question

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>