CSS图片的水平居中是网页设计中一个常见的需求。下面我们就来学习一种简单的方法实现这个功能。

/* 将图片设置为行内元素 */
img {
display: inline-block;
}
/* 设置父盒子为相对定位 */
.container {
position: relative;
}
/* 使用绝对定位 */
img {
position: absolute;
/* 距离父元素左侧50% */
left: 50%;
/* 图片本身宽度的一半作为偏移量 */
transform: translateX(-50%);
}

我们首先将图片设置为行内元素，让它可以在父盒子中居中。然后将父盒子设置为相对定位，为图片绝对定位做准备。接着设置图片为绝对定位，距离左侧50%。最后使用translateX函数，将图片自身的宽度的一半作为偏移量，使其水平居中。

这种方法简单易懂，适用范围广，可以应用于各种网页中的图片居中设置。