現代網頁設計中，居中是一個非常常用的布局方式，尤其是在顯示器屏幕的居中方面。在CSS中實現此目的的代碼解決了居中顯示的大部分問題，下面將介紹幾個方法。

/*
* 左右結構的居中布局，寬度不定
*/
.container {
display: flex;
justify-content: center;
}
/*
* 確定寬度（width）和高度（height）的居中布局
*/
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* 必須知道盒子元素的高度（height）和寬度（width）的居中布局
*/
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*
* 文本的居中布局
*/
.container {
display: flex;
justify-content: center;
align-items: center;
}

這里介紹的居中布局方法是在梳理 CSS 基礎上學習的逐步優化版本。實際上有很多途徑實現居中布局，但是應根據頁面設計的需求來選擇最佳的實現方法。