Align Text In The Middle Of A Circle With Css

i'm trying to align text in the middle of a circle with my below script but can't seem to get it to align in the middle both horizontally and vertically.

Solution 1:

As long as you only have one line of text, a simple trick is to set its line-height to the height of the circle:

.circle {
  background: rgba(72, 156, 234, 1);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: relative;
  box-shadow: 0 0 0 5px #F1F1F1;
  margin: 10px;
  color: #6F0;
  vertical-align: middle;
}

.text_circle {
  font-size: 36px;
  margin-bottom: 50px;
  line-height: 80px;
}

<div align="center" class="circle"><span class="text_circle">5</span></div>

Solution 2:

There are two solutions for your question.

One

Assign position:relative property to .circle

.circle {
   position:relative;
}

add following properties to text_circle

.text_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Two

Assign line-height property to circle with same height.

.circle {
  line-height: 80px;
}