在網頁設計中，需要使用CSS樣式來控制頁面的布局和顯示效果。其中，讓頁面元素居中顯示是常見的需求。本文將分享如何在手機頁面中使用CSS樣式實現居中顯示的效果。 首先，我們使用html中的pre標簽來展示CSS代碼：

//使用flex布局，設置該元素為flex容器
.container {
display: flex;
justify-content: center; /*在主軸方向上居中*/
align-items: center; /*在交叉軸方向上居中*/
}

以上代碼使用了flex布局來實現居中效果。在容器（即頁面元素）上設置`display: flex;`屬性，將其變為flex容器。接著，在容器的主軸上（橫向）和交叉軸上（縱向）分別使用了`justify-content: center;`和`align-items: center;`屬性，將其中的子元素居中顯示。這種方法可以靈活適用于各種元素的居中，如文字、圖片、按鈕等。 在實際應用中，我們對容器的形式和尺寸也需要進行一些設置。例如，若要居中顯示頁面的導航欄，可以如下所示：

//導航欄容器
.navbar {
display: flex;
justify-content: space-between; /*在主軸方向上兩端對齊*/
align-items: center; /*在交叉軸方向上居中*/
width: 100%;
height: 50px;
background-color: #eee;
padding: 0 10px;
}
//導航欄項
.nav-item {
font-size: 16px;
color: #333;
margin: 0 5px;
}

以上代碼中，`.navbar`類定義了導航欄的容器屬性，包括寬度、高度、背景色等。同時，在主軸方向上使用了`justify-content: space-between;`屬性，并配合子元素的`margin`屬性，實現了兩端對齊的效果。 之后，我們在`.nav-item`類中定義了導航欄的每一項的樣式，包括字體大小、顏色等。而這些項在`.navbar`類的容器中，將自動居中顯示。 綜上，使用CSS樣式在手機頁面中實現元素居中效果，可以增加頁面的美觀度與易讀性，提升用戶體驗。