Как разместить текст внутри кружочка

#html

Всем привет Есть такая задача нужно разместить внутри кружочка текст по середине.
Явно нужно использовать позиционирование. Но что у меня не совсем выходит.

Привожу код.





.round {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

  

    

    

      
15
    

  




    

Ответы

Ответ 1

Попробуйте вот это решение с использованием Flexbox



.round {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 90px;
}

  

    15



  



Ответ 2

.round {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
}

.text {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.number {
  display: block;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  line-height: 90px;
}

  

    

    

      
15