CSS圖標加文字居中是網頁設計中常用的一種技巧，在很多場景下都非常的實用。下面將介紹如何通過CSS實現圖標與文字的居中對齊。

首先，我們需要確定圖標與文字的容器，在這個容器內部，我們可以通過CSS樣式設置圖標與文字的位置關系，實現其居中對齊。下面是一個基本的HTML結構：

<div class="icon-container">
<i class="fa fa-search"></i>
<span>搜索</span>
</div>

在上述代碼中，我們通過一個div元素包裹了一個圖標和一個文本，這個div元素就是我們設置圖標與文本位置關系的容器。接下來，我們需要使用CSS來設置容器內部的布局。

.icon-container {
display: flex;
align-items: center;
justify-content: center;
}
.icon-container i {
margin-right: 10px;
}

CSS代碼中，我們使用了 Flex 布局模型，通過display: flex設置了 div 元素為彈性盒子布局。然后通過align-items: center和justify-content: center分別設置了相關元素的垂直和水平居中對齊。最后，margin-right: 10px是給圖標元素增加一個右側的邊距，以使其與文本之間產生一定的間隔。

通過上述CSS代碼的設置，在容器內部的圖標和文本就可以實現相對于容器的居中對齊。盡管這并不是一種特別復雜的CSS樣式，但是合理地應用這種技巧可以讓你的網站更加美觀和易于使用。如果你需要使用這種技巧，那么上述CSS代碼可作為一個起點。