[分享]css中如何把图片居中显示图片

在网页设计中，如何把图片居中显示是一个比较常见的问题。CSS提供了多种方式让我们实现图片居中，下面我们来介绍一些方法：1. 使用textalign: center属性我们可以通过给图片所在容器添加te...

在网页设计中，如何把图片居中显示是一个比较常见的问题。CSS提供了多种方式让我们实现图片居中，下面我们来介绍一些方法：
1. 使用text-align: center属性
我们可以通过给图片所在容器添加text-align: center属性来实现图片居中。代码示例：

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

2. 使用margin属性
我们也可以使用margin属性来使图片居中。在这种方法中，需要将图片的display属性设置为“block”，并设置左右margin为“auto”。代码示例：

<br>
<style><br>
  img{<br>
    display: block;<br>
    margin-left: auto;<br>
    margin-right: auto;<br>
  }<br>
</style><br>

<img src="image.jpg" alt="image" /><br> 

3. 使用flex布局
在CSS3中，我们可以使用flex布局来实现图片居中。这种方法需要将图片所在容器设置为一个flex容器，并使用justify-content和align-items属性来设置图片位置。代码示例：

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

以上是使用CSS实现图片居中的三种常见方法，你可以根据具体情况选择合适的方法。