CSS3 中提供了一種讓圖片在屏幕居中顯示的方法，非常方便實(shí)用，讓我們一起來(lái)學(xué)習(xí)一下吧。

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

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

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

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

這段代碼的解釋如下：

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

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