在网页设计中，需要使用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样式在手机页面中实现元素居中效果，可以增加页面的美观度与易读性，提升用户体验。