首先，在手機端設計網頁時，我們經常需要將圖片居中顯示，這樣可以讓網頁更加美觀和易于閱讀。在CSS中，我們可以使用以下三種方法來將圖片居中顯示： 第一種方法是使用text-align屬性。我們可以將圖片所在的父元素的text-align屬性設置為center來使圖片水平居中。同時，要保證圖片元素的寬度小于其父元素的寬度，否則圖片將無法居中。 代碼示例：

<style>
.parent {
text-align: center;
}
.child {
width: 50%;
}
</style>
<div class="parent">
<img src="example.jpg" class="child">
</div>

第二種方法是使用margin屬性。我們可以通過將圖片元素的左右margin屬性設置為auto來實現水平居中。同樣，要確保圖片寬度小于其父元素的寬度。 代碼示例：

<style>
.child {
width: 50%;
margin: 0 auto;
}
</style>
<img src="example.jpg" class="child">

第三種方法是使用flexbox布局。我們可以將圖片所在的父元素的display屬性設置為flex，并使用justify-content和align-items屬性來使圖片居中顯示。這種方法可以很好地適應不同的父元素寬度。 代碼示例：

<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 50%;
}
</style>
<div class="parent">
<img src="example.jpg" class="child">
</div>

總的來說，以上三種方法是在CSS中常用的將手機圖片居中的方法。根據不同的需求和實際情況，我們可以選擇最適合的方法進行使用。