在網站編程時，居中元素是一件非常基礎的工作。雖然有許多的方式可以使你的元素達到垂直或水平居中，但是在這里，我們將關注使用CSS框架來實現這個目標。 在CSS框架中實現居中元素，我們需要使用一些類或方法來幫我們快速實現。下面，我們將使用Bootstrap 5作為示例來演示如何在頁面中居中元素。 1. 垂直居中 想要實現垂直居中，我們可以使用Bootstrap 5中的flexbox類。以下是我們要使用的類： d-flex：定義一個容器，用于存放我們的元素 align-items-center：設置子元素在容器中垂直居中 justify-content-center：將子元素水平居中于容器內 如下所示的代碼片段實現了垂直居中：

垂直居中的文本

2. 水平居中 要實現水平居中元素，我們可以采用以下代碼： mx-auto：將元素設置為水平居中 如下所示的代碼片段實現了水平居中：

水平居中的文本

總結： 在實現垂直和水平居中的過程中，很多時候都需要使用flexbox來實現。我們可以通過使用CSS框架中預定義的flexbox類和輔助類來輕松地實現居中元素。在實踐中，根據具體場景選擇合適的CSS框架來實現居中元素是一項重要的技能，也是有效提高網站排版水平的必要措施。