CSS定位图片居中非常实用，可以为网站页面添加更多美感和可读性。本文将介绍如何使用CSS将图片居中。 第一步：使用position属性 CSS的position属性是实现居中定位的关键。position属性有三个可选值，分别是static、relative和absolute。 - static：默认定位方式，元素的位置不会发生变化。 - relative：相对定位，元素的位置相对于原来的位置发生移动。 - absolute：绝对定位，元素的位置相对于父元素发生移动。 在将图片居中的过程中，我们需要使用到的是绝对定位。 以下代码中，我们将图片的父元素（可以是div或其他标签）的position属性设置为relative，同时图片的position属性设置为absolute，再使用top和left属性或margin属性将图片居中。

p {
position: relative; /* 设定父元素的定位为相对定位 */ 
}
p img {
position: absolute; /* 设定图片的定位为绝对定位 */ 
top: 50%; /* 把图片向下移动50%的距离 */ 
left: 50%; /* 把图片向右移动50%的距离 */ 
transform: translate(-50%, -50%); /* 用transform属性将图片向左、向上移动50%的距离，以实现居中 */ 
}

以上代码将水平和垂直居中一张图片，可以使用于大多数情况。但是，在一些情况下，例如图片的宽度和高度过大，或者在响应式网页中，以上代码可能不适用。此时，我们需要根据具体情况调整代码。 第二步：使用calc（）函数 如果图片的宽度和高度已知，可以进一步优化CSS代码，使用calc（）函数将图片居中。 以下代码实现了按照图片宽度和高度居中的图片，其中calc（）函数表示了相对大小。

p {
position: relative; 
}
p img {
position: absolute;
width: 200px; /* 例如图片宽度为200px */
height: 150px; /* 例如图片高度为150px */
top: calc(50% - 75px); /* 把图片向下移动50%的距离减去图片高度的一半 */ 
left: calc(50% - 100px); /* 把图片向右移动50%的距离减去图片宽度的一半 */ 
}

以上就是使用CSS定位图片居中的方法，根据情况可以选择不同的代码实现，实现网站美化的同时提高可读性。