在網站的設計中，頁面樣式的居中設置非常重要。它可以讓網頁顯得更加整潔，讓用戶更加舒適地瀏覽網頁。在CSS中，我們有幾種方法可以實現網頁居中。下面是一個簡單的例子：

body {
display: flex;
justify-content: center;
align-items: center;
}

上面這段CSS代碼的作用是將整個網頁居中，其原理就是通過設置flex屬性來實現的。下面我們來詳細看一下這段代碼的每個部分：

display: flex;

這是設置網頁元素的顯示方式為flex，它是CSS3中新增的一種布局方式，相比傳統的布局方式更加靈活方便。

justify-content: center;

這是設置網頁元素在水平方向上居中對齊，也就是讓網頁在頁面的水平方向上居中顯示。

align-items: center;

這是設置網頁元素在垂直方向上居中對齊，也就是讓網頁在頁面的垂直方向上居中顯示。

使用以上這種方式設置CSS代碼，可以讓整個網頁居中顯示，使網頁更加美觀與整潔，提升用戶體驗。