在网页设计中，图片的居中显示是提高页面美观度和用户体验的关键。本文将详细介绍CSS中实现图片水平居中和垂直居中的方法，帮助您轻松掌握这些技巧，让你的页面设计更加专业。
一、图片水平居中
1. 利用margin: 0 auto实现图片水平居中
这是最常见也是最简单的方法。通过设置图片的margin属性为0 auto，可以使图片在父元素中水平居中。
2. 利用文本的水平居中属性text-align: center实现图片水平居中
将图片设置为inline-block元素，并利用父元素的text-align属性实现水平居中。
二、图片垂直居中
1. 利用高行高实现图片垂直居中
当容器高度确定时，可以通过设置容器的line-height属性与高度相等，并设置图片的vertical-align属性为middle来实现垂直居中。
2. 利用定位实现图片垂直居中
通过设置图片的position属性为absolute，并将top、left属性设置为50%，再通过transform属性进行微调，可以实现图片的垂直居中。
3. 利用flex布局实现图片垂直居中
通过设置父元素的display属性为flex，并设置justify-content和align-items属性为center，可以实现图片的垂直居中。
三、总结
通过以上方法，您可以轻松实现图片的水平居中和垂直居中。在实际应用中，可以根据具体情况选择合适的方法，使您的页面设计更加专业。