css中怎么让图片在网页居中

在网页设计中，很多时候需要把图片居中显示，而CSS提供了几种方法来实现。
一、使用text-align属性来水平居中
我们可以在图片的父元素中加入text-align:center属性，这样图片就会水平居中了。如下面的例子：

<p style="text-align:center">
   <img src="xxx.jpg">
</p> 

二、使用margin属性来水平居中
我们可以给图片设置左右margin为auto，这样图片也可以水平居中。如下面的例子：

<style>
   img {
     display: block;
     margin: 0 auto;
   }
</style>

<p>
  <img src="xxx.jpg">
</p> 

三、使用Flexbox来水平和垂直居中
Flexbox是CSS3新引入的布局方式，它比传统的布局方式更加灵活，特别适合网页的响应式设计。我们可以使用Flexbox来实现图片的完美居中。如下面的例子，我们把图片的父元素设置为Flex容器，然后在Flex容器中设置justify-content:center和align-items:center属性，这样图片就可以水平和垂直居中了：

<style>
   .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   img {
      display: block;
   }
</style>

<div class="flex-container">
   <img src="xxx.jpg">
</div> 

以上就是三种在网页中让图片居中的方法，每种方法根据实际需求的不同，可以选择不同的方法来进行设计。