在網站設計中，圖標的運用是不可避免的。然而，很多時候我們會發現，將圖標垂直居中對齊卻不是一件容易的事情。本文將會介紹如何使用CSS將圖標垂直居中對齊。 首先，我們需要為圖標創建一個容器。我們可以使用一個div標簽，然后為這個標簽添加CSS屬性。

.icon-container {
display: flex;
justify-content: center;
align-items: center;
}

上述代碼的作用是使圖標容器成為一個flexbox容器。我們使用了flex屬性將圖標水平居中。接下來，我們需要使用align-items屬性將圖標垂直居中。

.icon {
display: inline-block;
vertical-align: middle;
}

上述代碼中，我們使用inline-block屬性使圖標可以與文本對齊。然后，我們使用vertical-align屬性來將圖標垂直居中。 在使用這些CSS屬性時，我們需要注意一些問題。首先，我們需要給圖標容器設置一個具體的寬度和高度。其次，我們需要確保圖標的高度與行高相等，這樣圖標才能夠垂直居中對齊。最后，我們需要選擇適合的圖標格式，以便在不同的設備上顯示良好。 總結來說，使用CSS將圖標垂直居中對齊需要首先將圖標容器設置為flexbox容器，使用justify-content和align-items屬性水平和垂直居中對齊圖標。同時，我們需要選擇適合的圖標格式，并確保圖標容器具有固定的寬度和高度，以及正確的行高。