CSS可以實現各種各樣的布局效果，但是有一種常見的需求卻讓它束手無策——如何讓數字居中。

<code>div {
width: 100px;
height: 100px;
font-size: 48px;
line-height: 1;
text-align: center;
border: 1px solid black;
}</code>

假設我們有一個寬高為100px的div，里面要顯示一個數字，字體大小為48px，邊框為1px黑色。我們很自然地會想到使用text-align:center來讓數字在div中水平居中，然后使用line-height來讓它垂直居中：

<code>div {
width: 100px;
height: 100px;
font-size: 48px;
text-align: center;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}</code>

但是有一天，你遇到了一個數字0，它居然不在中心位置了！

為什么會這樣呢？我們知道，數字的形狀各不相同，有的數字在中心點的上半部分，有的在下半部分。而默認情況下，行內元素在垂直方向上是基于字母x的中線對齊的。而數字0的中線和字母x的中線是不同的。所以在這個例子里，0在中心的下面。

那么有沒有其他的方法能夠解決這個問題呢？答案是沒有。我們嘗試使用vertical-align來調整數字的垂直位置，但是它并沒有什么用。

所以，如果你還要用CSS來實現數字的居中，就要接受這樣的現實：有時候，數字就是放不在正中間。