CSS3 中提供了一種讓圖片在屏幕居中顯示的方法，非常方便實用，讓我們一起來學習一下吧。

首先，在 HTML 中插入一張圖片：

<img src="xxx.jpg" alt="圖片">

接下來，為了讓圖片在屏幕居中顯示，我們需要將它的位置設為 fixed，然后使用 top、bottom、left、right 等屬性進行定位，并使用 transform 屬性來水平和垂直居中顯示：

<style>
img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

這段代碼的解釋如下：

• position: fixed; 設置圖片的定位方式為 fixed，讓它脫離文檔流。
• top: 50%; 將圖片的頂部定位到屏幕的中心。
• left: 50%; 將圖片的左側定位到屏幕的中心。
• transform: translate(-50%, -50%); 使用 transform 屬性來將圖片水平和垂直居中。

這樣，圖片就可以在屏幕居中顯示了，是不是非常簡單方便呢？趕緊嘗試一下吧！