CSS图片居中技术是网页设计和开发过程中的一项关键技能，能够让我们的图片在页面中的位置更加准确和美观。在这篇文章中，我们将详细讨论CSS图片居中的方法和技巧，包括水平居中和垂直居中两个方面。

水平居中

水平居中是将图片相对于页面水平居中。下面我们将分享三种方法实现CSS图片水平居中。

1.使用text-align:center方法。可以将图片所在的容器，比如div、section、article等元素，中心对齐使用text-align:center方法。此时，图片应该设置为显示为“块级元素”（display:block)。

2.使用margin-left:auto和margin-right:auto方法。可以同时将左边距和右边距设置为“自动”，实现CSS居中对齐。此时，图片应该设置为显示为“块级元素”（display:block)。

3.使用transform:translateX(-50%)方法。可以使用CSS3的transform属性和负值百分比值，将图片左移（即负方向移动），并使之居中。

垂直居中

垂直居中是将图片相对于页面垂直居中。下面我们将分享三种方法实现CSS图片垂直居中。

1.使用display:flex和align-items:center方法。使用display:flex属性，将图片所在的容器设置为弹性盒模型容器，然后使用align-items:center方法，让图片在垂直方向上居中。

2.使用absolute和transform方法。可以将图片容器使用position:absolute方法进行绝对定位，然后使用transform属性对图片进行偏移，以实现在垂直方向上居中。

3.使用line-height属性和vertical-align:middle方法。可以设置图片容器的line-height属性和vertical-align:middle方法实现在垂直方向上居中。

总结

在本文中，我们讨论了三种水平居中和三种垂直居中的CSS图片居中方法。这些技巧可以让你的图片在网页中更加尽善尽美。当然，具体的方法应该根据自己的实际情况来进行选择。