標題：圖片居中在 CSS 樣式

隨著網頁設計的不斷進化，越來越多的網站開始使用圖片來裝飾自己的頁面。但是，有時候我們需要將圖片居中到網頁中，但是默認的居中方式可能會讓圖片變形。現在，我們可以通過使用 CSS 樣式來將圖片居中。

首先，我們需要將圖片保存為 .jpg、.png 或 .jpeg 等支持圖像格式。然后，我們需要在 HTML 中添加一個圖片元素，例如：

```html

在上面的代碼中，我們使用了 `style` 標簽來設置圖片的居中方式。我們使用了 `position: absolute;` 屬性來將圖片定位到網頁的中央位置，同時使用了 `top: 50%; left: 50%;` 來將圖片的上下左右移動到合適位置。最后，我們使用了 `transform: translate(-50%, -50%);` 屬性來將圖片的左右移動到合適的位置，同時保持高度不變。

當圖片居中后，我們可以使用 HTML 的 `width` 和 `height` 屬性來設置圖片的寬度和高度，以確保圖片在居中后保持合適大小。

例如，如果我們將一張 500x500 像素的圖片設置為 `width: 100%; height: 100%;`，則可以確保圖片在居中后保持 500x500 像素的大小。

通過使用 CSS 樣式將圖片居中，我們可以輕松地將圖片應用于任何網頁，而無需擔心圖片變形的問題。同時，CSS 樣式還可以用于其他許多應用場景，例如文本環繞、背景色、字體大小等。