在不同的布局場景下，讓?<img>?元素居中的方法有所不同。下面為你介紹幾種常見的居中方式
1. 塊級元素下的水平居中
如果?<img>?元素是塊級元素（可以通過?display: block?設置），可以使用?margin: 0 auto?來實現水平居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平居中圖片</title><style>img {display: block;margin: 0 auto;}</style>
</head><body><img src="https://picsum.photos/200/300" alt="示例圖片">
</body></html>2. 內聯元素下的水平居中
如果?<img>?元素是內聯元素，可將其父元素的?text-align?屬性設置為?center?來實現水平居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平居中圖片</title><style>.parent {text-align: center;}</style>
</head><body><div class="parent"><img src="https://picsum.photos/200/300" alt="示例圖片"></div>
</body></html>垂直居中
1. 使用?flexbox?布局
可以使用?flexbox?布局來實現圖片的垂直居中。將父元素設置為?display: flex?或?display: inline-flex，并使用?align-items: center?實現垂直居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中圖片</title><style>.parent {display: flex;align-items: center;height: 300px;border: 1px solid #ccc;}</style>
</head><body><div class="parent"><img src="https://picsum.photos/200/300" alt="示例圖片"></div>
</body></html>水平和垂直同時居中
1. 使用?flexbox?布局
通過?flexbox?布局可以輕松實現圖片的水平和垂直同時居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平和垂直居中圖片</title><style>.parent {display: flex;justify-content: center;align-items: center;height: 300px;border: 1px solid #ccc;}</style>
</head><body><div class="parent"><img src="https://picsum.photos/200/300" alt="示例圖片"></div>
</body></html>2. 使用?position?和?transform
同樣，使用絕對定位和?transform?屬性也能實現圖片的水平和垂直同時居中。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平和垂直居中圖片</title><style>.parent {position: relative;height: 300px;border: 1px solid #ccc;}img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head><body><div class="parent"><img src="https://picsum.photos/200/300" alt="示例圖片"></div>
</body></html>
報錯：參數無效，如何將圖像分塊化處理？){kind=tracking}
