為了讓網頁看起來更美觀，頁面的布局需要進行合理的搭配和設計，其中一個重要的部分就是讓頁面在瀏覽器中居中顯示。那么，在網頁設計中，如何給頁面居中的CSS樣式呢？

body{
display: flex; /* 設置彈性盒子 */
flex-direction: column; /* 縱向排列 */
justify-content: center; /* 垂直方向居中 */
align-items:center; /* 水平方向居中 */
}

以上代碼中，首先將body元素的display屬性設置為flex，表示要將頁面布局設置為彈性盒子。接著，設置flex-direction屬性為column，表示子元素在彈性盒子中的排列方式為縱向排列。

緊接著，設置justify-content屬性為center，用于在垂直方向上將子元素居中。再將align-items屬性設置為center，可將子元素在水平方向上居中顯示。這樣，整個頁面就可以在瀏覽器中自適應居中顯示。

實際應用中，如果需要給某個區塊進行居中顯示，只需將其父元素設置為彈性盒子，并設置相關的CSS樣式即可。比如下面的示例代碼：

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

以上代碼中，.box是要居中顯示的區塊，將其父元素的display屬性設置為flex，再設置justify-content和align-items屬性為center，即可實現區塊在瀏覽器中水平垂直居中顯示。

當然，以上只是其中一種方法，還有其他的居中方式，如使用絕對定位等。不同的場景下選擇不同的方式，能夠更好的達到效果。希望本文能夠給大家在網頁設計中提供一些幫助。