添加CSS樣式是網頁設計中的一個重要環(huán)節(jié)，而居中對齊是其中的常見操作。本文將介紹如何使用CSS將圖形居中對齊。

// HTML結構
<div class="box">
<i class="icon"></i>
</div>
// CSS規(guī)則
.box {
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 50px;
height: 50px;
background: url("../images/icon.png") no-repeat;
}

首先，我們需要在HTML中添加一個容器，然后在容器中添加一個需要居中的圖形元素。在CSS中，我們將容器的display屬性設置為flex，這樣可以讓容器內的元素更加靈活地排列。接著，我們使用justify-content和align-items兩個屬性，分別控制容器內元素在水平方向和垂直方向上的對齊方式，設置為center即居中。

以上代碼中的.icon選擇器是指定需要居中的圖形元素，我們將它設置為50px的正方形，并添加了一張背景圖片。由于我們需要在CSS中設置背景圖片的路徑，所以需要根據實際情況調整相對路徑。

通過以上CSS樣式，我們可以輕松將圖形居中對齊，達到更好的網頁設計效果。