居中是CSS設計中非常重要的一個問題，特別是在圖標設計中尤為突出。很多時候我們需要在導航菜單、按鈕上添加圖標，但是如何使圖標與文本上下居中卻成了讓人頭疼的問題。 在CSS中，最簡單的方法就是設置icon與文本的行高相同，這樣就可以讓它們居中對齊。我們可以通過在CSS中定義line-height屬性來實現這個效果，如下所示： pre{ line-height: 36px; } 上面的代碼將會使文本和圖標的行高都設置為36像素，達到上下居中的效果。然而實際應用時需要根據圖標和文字的具體情況進行調整。 如果圖標的尺寸和文本不同，或者你希望圖標稍微比文字高一些，那么更好的方法是將圖標作為背景圖片，并使用background-position屬性進行調整。這樣不僅可以讓你對圖標的垂直位置進行微調，還可以將文本和圖標之間的距離設置為不同的值。 同時，如果你想要讓圖標垂直居中，但是又不想改變文本的行高，你也可以使用vertical-align屬性。將圖標設置為display:inline-block或者使用等表單元素類型，并將vertical-align屬性設置為middle即可。 pre{ background: url('icon.png') no-repeat center center; background-size: contain; display: inline-block; vertical-align: middle; width: 24px; } 上面的代碼就將圖標設置為背景圖片，并且將它垂直居中對齊。background-size屬性用于調整圖標的大小，width屬性用于設置圖標的寬度。我們可以根據具體的需求進行調整。 總的來說，上下居中的問題在CSS設計中非常常見，但是也是比較容易解決的。我們只需要根據具體情況選擇合適的方法即可。