在Web設計中，常常需要使用icon來展示一些重要的信息，比如社交媒體鏈接、操作按鈕等等。但是，許多設計師都有一個問題：如何將icon垂直居中？ 在CSS中，有幾種方法可以垂直居中icon。下面是一些常見的方法。 1. 使用line-height屬性 使用line-height屬性是一種簡單而有效的方式來垂直居中icon。將line-height的值設置為元素的高度，就可以實現垂直居中了。

p {
height: 50px;
line-height: 50px;
}

2. 使用padding-top和padding-bottom屬性 另一種方法是使用padding-top和padding-bottom屬性。將這兩個屬性的值設置為相等的數值，就可以將內容居中。

p {
height: 50px;
padding-top: 20px;
padding-bottom: 20px;
}

3. 使用display:flex屬性 使用display:flex屬性也可以實現垂直居中。將父元素的display屬性設置為flex，再將子元素的align-items屬性設置為center，就可以實現垂直居中了。

div {
display: flex;
align-items: center;
}

4. 使用vertical-align屬性 最后一種方法是使用vertical-align屬性。將icon設置為inline-block元素，再將父元素的vertical-align屬性設置為middle，就可以實現垂直居中了。

span {
display: inline-block;
vertical-align: middle;
}

以上是一些常見的方法來實現icon的垂直居中。根據實際情況，你可以選擇其中的任何一種方法來解決你的問題。