HTML中，图标是一个重要的设计元素，使用它可以使网站看起来更具吸引力。一个常见的问题是如何将图标居中显示，接下来本文将介绍如何使用CSS实现这一目标。 首先，在HTML中添加一个包含图标的元素，例如i标签，为其添加一个类名，例如"icon"，然后将图标插入到i标签中。

<i class="icon"></i>

接下来，在CSS样式表中为"icon"类添加属性text-align: center;，这将使图标在其容器内居中显示。

.icon{
text-align: center;
}

此时，图标虽然已经居中显示，但它仍然可能太小或太大。为了调整其大小，可以使用font-size属性。例如，将字体大小设置为24像素。

.icon{
text-align: center;
font-size: 24px;
}

除了使用字体大小来设置图标大小之外，还可以使用width和height属性进行调整。因此，可以在"icon"类中添加这些属性来控制图标的大小。

.icon{
text-align: center;
font-size: 24px;
width: 30px;
height: 30px;
}

最后，这里还有一个小技巧，例如当一个图标与文本一起居中显示时。就可以使用CSS的vertical-align属性，将其设置为middle。例如：

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

以上就是如何在CSS中居中显示图标的全部内容。需要注意的是，在某些情况下，可能需要使用不同的方法来实现这个效果。