css3图片如何水平居中

 在网页设计中，图片的水平居中是常见的需求。在CSS3中，有多种方式可以实现图片水平居中的效果。下面介绍其中几种方法：
1. 使用text-align属性
可以将图片的父元素的text-align属性设置为center即可实现图片的水平居中。例如：

  <div style="text-align:center">
            <img src="image.jpg" alt="example" />
       </div> 

2. 使用margin属性
可以将图片的左右margin设置为auto，使图片自动居中。例如：

  <div style="width: 50%;">
            <img src="image.jpg" alt="example" style="margin: 0 auto; display: block;" />
       </div> 

3. 使用flex布局
使用flex布局可以使图片自动居中。例如：

  <div style="display:flex;justify-content:center;">
            <img src="image.jpg" alt="example" />
       </div> 

以上是几种常见的CSS3图片水平居中的方法，可以根据实际需求选择合适的方法来实现。