在網頁設計中，圖片是不可或缺的元素。而當我們使用jQuery Mobile框架時，有時候需要將圖片居中顯示，但它與其他元素的排列方式可能有所不同。下面，我們就來討論如何使圖片在jQuery Mobile中居中顯示。 首先，我們可以使用CSS的margin屬性實現圖片居中。具體來說，我們可以在樣式表中為圖片添加以下代碼：

img {
display: block;
margin: 0 auto;
}

這段代碼將使圖片以塊狀元素方式顯示，并且設置左右margin為auto，從而實現居中顯示。但這種方法有一個缺點：如果圖片的大小不一，就無法保證它們在水平方向上都居中。 為了解決這個問題，我們可以使用更加靈活的方法。首先，我們需要給圖片所在的外層容器設置一個相對定位（position: relative），然后再給圖片設置絕對定位（position: absolute）。具體來說，我們可以在HTML中添加以下代碼：

<div class="container">
<img src="example.jpg" class="centered">
</div>

接著，在樣式表中，我們為容器和圖片分別添加以下代碼：

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

這段代碼將使圖片相對于容器垂直居中，并且水平方向上也會居中。其中，top、left屬性將圖片的偏移量設置為容器的中心坐標，而transform屬性將它細微調整至完全居中。 以上就是使用jQuery Mobile居中圖片的兩種方法。不同的場合下可根據需求選用不同的方式，以達到最佳效果。