CSS可以很輕松地對圖片進行居中操作。下面我們來介紹幾種實現方式。

// 方式一：使用 text-align 屬性
img {
text-align: center;
}
// 方式二：使用 margin 屬性
img {
display: block;
margin: 0 auto;
}
// 方式三：使用 flexbox 布局
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%;
max-height: 100%;
}

方式一很簡單，只需要給圖片應用text-align: center;樣式即可。但是需要注意的是，這種方式只對行內元素有效，所以需要給圖片設置display: block;避免行內塊級元素的影響。

方式二使用margin: 0 auto;樣式可以實現水平居中，同時需要設置display: block;避免行內塊級元素的影響。

方式三使用 flexbox 布局可以實現水平和垂直居中，需要在圖片外圍包裹一個容器，并設置該容器的display: flex;樣式以及使用justify-content: center;和align-items: center;屬性進行定位。