在手機頁面中，經常會出現需要將一些元素居中顯示的情況，特別是對于唯一頁面內容的情況。這種情況下，我們需要使用CSS樣式來實現頁面居中的效果。

首先，我們可以使用Flexbox布局來居中頁面中的元素。具體來說，我們可以將容器元素的display屬性設置為flex，并使用align-items和justify-content屬性來進行垂直和水平居中。例如：

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

另一種居中的方法是使用CSS的transform屬性來實現。我們可以將需要居中的元素的position屬性設置為absolute，并使用top，left，bottom和right屬性來使其緊貼父元素。接下來，我們可以使用CSS的transform屬性來對該元素進行位移，并使其居中顯示。例如：

.container {
position: relative;
}
.center-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用這種方法時需要注意，父元素的position屬性不能是static，否則會對垂直居中產生影響。

最后，我們也可以使用CSS的text-align屬性來實現水平居中。例如，我們可以將需要居中的元素設置text-align:center來讓它水平居中。例如：

.container {
text-align: center;
}

注意，這種方法只適用于一行內的元素，如果需要多行元素水平居中，仍然需要使用flexbox布局或transform屬性。

綜上所述，通過flexbox布局、transform屬性和text-align屬性，我們可以簡單快捷地實現手機頁面中元素的居中效果，提升用戶的體驗。