CSS 圓圈數(shù)字垂直居中，一直是前端工程師最常遇到的問題之一。這個問題可以通過使用 flexbox 和偽元素來解決。

首先，在 CSS 中創(chuàng)建一個包裹數(shù)字的容器:

.number-container {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}

這個容器將會創(chuàng)建一個圓形，在居中數(shù)字時非常有用。我們將使用 justify-content 和 align-items 屬性將數(shù)字水平和垂直居中。

接下來，我們需要在容器內(nèi)部創(chuàng)建偽元素，并將其設(shè)置為塊級元素:

.number-container::before {
content: "";
display: block;
height: 100%;
vertical-align: middle;
}

通過給偽元素設(shè)置 height: 100%，使其與容器等高。垂直居中需要將偽元素的 vertical-align 屬性設(shè)置為 middle。

最后，我們將數(shù)字添加到容器內(nèi)部:

<div class="number-container">
<span>1</span>
</div>

代碼完成后，數(shù)字將出現(xiàn)在圓形容器中并垂直居中。如果您需要添加更多數(shù)字，只需要將數(shù)字添加到容器內(nèi)部:

<div class="number-container">
<span>1</span>
</div>
<div class="number-container">
<span>2</span>
</div>

如此就能在任何項目中垂直居中數(shù)字，使您的頁面看起來更專業(yè)。