CSS HTML center text in circle

Question

I have a circle and in it I have a number, my question is: how do I put the number in center of circle?

I know there are other articles similar to this but they did not help me.

Here is what I have tried:

.circle{

    border-radius: 50%;
    background-color: #0276FD; 
    border: 12px solid #0276FD;
    color: black;
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    text-align: center;   
}

Here is the result:

Result

Any ideas?

Thanks in advance.

I think, [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) could be of help for you. — Geshode, Apr 29 '21 at 07:15
Welcome to Stack Overflow! Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=css+center+text+in+circle+site:stackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Apr 29 '21 at 07:16

score 0 · Accepted Answer · answered Apr 29 '21 at 07:15

I would use flexbox for this

.circle{
    border-radius: 50%;
    background-color: #0276FD; 
    border: 12px solid #0276FD;
    color: black;
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    text-align: center;   
    
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="circle">1</div>

CSS HTML center text in circle

1 Answers1