CSS HTML 文字居中圆圈

Question

我有一个圆圈，里面有一个数字，我的问题是：如何把数字放在圆心？

我知道还有其他类似的文章，但它们对我没有帮助。

这是我尝试过的：

.circle{

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

结果如下：

有什么想法吗？

提前致谢。

Answer 1

为此我会使用 flexbox

.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 文字居中圆圈

CSS HTML center text in circle

html

css

border

centering