在網頁設計中，居中排版可以使頁面更加美觀，同時也能提升用戶體驗。在CSS中，有多種方式可以實現居中排版，下面我們一一進行介紹。 1. 水平居中 要將頁面內容水平居中，可以使用以下CSS代碼： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 這段代碼表示設置該div元素為彈性盒模型，并將內容項分別沿橫軸和縱軸居中。這種方式適合于一些固定寬度的元素，如按鈕，圖標等。 2. 垂直居中 如果要將元素垂直居中，您可以嘗試以下CSS代碼： ```css .container { position: absolute; top: 50%; transform: translateY(-50%); } ``` 這段代碼設置該div元素的位置，然后通過transform屬性將該元素平移50%的高度。 同時，你也可以在父元素中使用以下方式使元素垂直居中： ```css .parent { display: flex; align-items: center; } ``` 這將把所有子元素垂直居中。這種方法適合于一些高度不確定的元素，如文本內容等。 3. 水平垂直都居中 最后，我們將為您介紹如何實現元素在水平和垂直方向都居中。您可以使用以下CSS代碼： ```css .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 這段代碼設置該元素的位置，并通過transform屬性將該元素平移50%的高度和寬度。這種方法適合于一些高度和寬度不固定的元素，如圖像，背景圖片等。 總結 在CSS中，居中排版可以通過不同的方式來實現。您可以選擇最適合您需要的方式來實現元素的居中顯示。希望這篇文章對您有所幫助。