CSS圓圈上顯示文字

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #e74c3c;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
font-weight: bold;
}
<div class="circle">1</div>

在CSS中制作圓圈并將文字顯示在圓圈上是一種非常常見的設(shè)計(jì)。你可以使用"border-radius"屬性來將一個(gè)矩形轉(zhuǎn)換成圓形。然后，你可以使用"display"屬性將該圓形轉(zhuǎn)換成一個(gè)彈性盒子容器（Flexbox container）。最后，使用"justify-content"和"align-items"屬性將文本居中顯示在圓圈中央。

在上面的代碼中，我們使用了一個(gè)類名叫作"circle"來應(yīng)用上述CSS樣式，使其顯示成一個(gè)紅色的圓形。我們?cè)谠搱A形中加入了一個(gè)數(shù)字"1"。你同樣可以在圓圈中使用其他內(nèi)容。

這個(gè)CSS技巧是一種簡單，靈活和效果非常好的方式來設(shè)計(jì)你的UI界面。你可以將其應(yīng)用于諸如網(wǎng)站導(dǎo)航，產(chǎn)品標(biāo)簽或其它需要有趣的標(biāo)記的設(shè)計(jì)中。