如何讓CSS圖標居中？
在網站和應用程序的設計中，使用圖標已經變得越來越普遍。然而，當要讓圖標水平和垂直居中時，我們有時會發現這個任務并不是那么簡單。因此，在本文中，我們將向您展示如何使用CSS設置圖標居中。
水平居中
為了讓一個圖標水平居中，我們可以使用以下CSS代碼：

.parent {
display: flex;
justify-content: center;
}
.icon {
width: 30px;
height: 30px;
}

在這個例子中，我們使用了flexbox來實現水平居中。我們將使用此flex屬性來告訴瀏覽器將父元素設置為彈性容器，然后使用justify-content: center讓圖標在父容器中水平居中。請注意，我們還為圖標定義了width和height，這兩個屬性應根據您的實際需求來設置。
垂直居中
要讓圖標垂直居中，我們可以使用以下CSS代碼：

.parent {
display: flex;
align-items: center;
}
.icon {
width: 30px;
height: 30px;
}

在這個例子中，我們再次使用了flexbox。但是，這次，我們使用了align-items: center來讓圖標垂直居中。同樣，我們也為圖標定義了width和height。
水平和垂直居中
要同時讓圖標水平和垂直居中，我們可以使用以下CSS代碼：

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 30px;
height: 30px;
}

在這個例子中，我們使用了justify-content: center和align-items: center來同時實現水平居中和垂直居中。同樣，我們也為圖標定義了width和height。
總結
現在，您已經知道如何使用CSS讓圖標水平和垂直居中了。請記住，使用display: flex和justify-content和align-items屬性會讓您的實現過程變得更加簡便，因為這些屬性會告訴瀏覽器如何布置和排列您的元素。同時也可以根據您的實際需求進行適當的調整。