在网页设计中，很多时候需要对图片进行居中处理。下面就来介绍一下如何通过CSS来实现图片左右居中的效果。

首先，将需要居中的图片包裹在一个div容器中，设置该容器的宽度为100%，并将其text-align属性设置为center。这样可以使得div容器水平居中。

<div style="width:100%;text-align:center;">
<img src="example.png" />
</div>

接着，通过给img元素设置display属性为block，使该元素变成块级元素，从而实现水平居中。

<div style="width:100%;text-align:center;">
<img src="example.png" style="display:block;" />
</div>

如果想让图片在垂直方向也居中，可以在图片容器div中设置display属性为flex，并将其垂直方向的对齐方式设置为居中。

<div style="width:100%;text-align:center;display:flex;align-items:center;">
<img src="example.png" style="display:block;" />
</div>

通过以上几步，就可以很轻松地实现CSS图片左右居中的效果了。