在網頁設計中，圖標作為界面的重要組成部分，使用圖標可以更好地提升網站的整體美觀程度。然而，在設置圖標的時候，我們經常會遇到一種情況，就是圖標不能夠居中顯示。這個時候，我們可以借助CSS的方法來幫助我們實現圖標的居中顯示。

首先，我們在HTML代碼中加入一個div元素作為容器，然后在容器內加入我們想要居中顯示的圖標，比如下面這段代碼：

<div class="icon-container">
<i class="iconfont icon-heart"></i>
</div>

在CSS中，我們使用以下的代碼來實現圖標的居中顯示：

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

上面的代碼使用了flex布局，通過設置justify-content和align-items屬性來實現圖標的水平和垂直居中。其中，justify-content用于水平方向的對齊，center表示居中對齊；而align-items用于垂直方向的對齊，同樣也是使用center來實現垂直居中對齊。

通過上述CSS代碼的設置，我們就可以輕松地實現圖標的居中顯示了。需要注意的是，在實際應用中，根據不同的情況，我們也可以使用其他的CSS布局方式來實現圖標的居中顯示，比如使用text-align和line-height屬性來實現文本的居中，或者使用position:absolute、top:50%以及transform:translateY(-50%)等方法來實現元素的居中。