使用CSS圖標可以為網站增添一些額外的風格和美感，并且可以起到很好的頁面布局效果。本文將介紹如何使用CSS圖標在頁面中央進行居中的設置。
首先，在HTML頁面中添加需要居中的CSS圖標。在這個例子中，我們將使用一個來自Bonus Icons的星星圖標：
<link rel="stylesheet" > <i class="bif-star"></i>接下來，我們需要創建一個CSS類來定義文字和圖標的居中。我們可以使用Flexbox布局，并將主軸和側軸都設置為居中：
<style>
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>在這個例子中，我們將高度設置為100vh，以便使圖標在整個視口內進行居中。根據需要，您可以根據自己的需求進行調整。
最后，在HTML頁面中將CSS類應用于包含著要居中的圖標的元素（在這個例子中是元素）：<body> <div class="centered"> <i class="bif-star"></i> </div> </body>現在，您的CSS圖標應在頁面中央進行居中！ 綜上所述，使用CSS圖標并將其在頁面中央進行居中可以起到很好的頁面布局效果。通過創建一個CSS類來定義圖標和文字的中心，并將其應用于HTML元素，您可以快速輕松地實現這種效果。
上一篇css 圖片 不要點擊
下一篇css3延時過渡