css中怎么让导入的图片居中

CSS中怎么让导入的图片居中
对于网站设计来说，图片是非常重要的。当我们向网页中加入图片时，经常会遇到需要让图片居中的情况。本文将探讨如何使用CSS将导入的图片居中。
首先，我们需要在HTML文档中导入图片。可以通过以下方式实现：

<img src="example.jpg" alt="example"> 

接着，使用CSS样式将图片居中。
方法1：

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

上面的代码中，我们使用了img元素和CSS样式，其中display属性将img元素设置为块级元素，并使用margin属性将图像水平居中。
方法2：

 <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
  
  <div class="container">
    <img src="example.jpg" alt="example">
  </div> 

在这种方法中，我们使用了Flexbox布局。将包含img元素的容器div设置为具有flexbox样式的块级元素。然后，使用justify-content和align-items属性在容器的水平和垂直方向上居中图像。
在本文中，我们探索了两种方法让导入的图片居中。第一种方法使用了CSS属性display和margin，并将img元素设置为块级元素。第二种方法使用了Flexbox布局，并将包含img元素的容器div设置为具有flexbox样式的块级元素。这两种方法都可行，但在不同的情况下可能会有所不同。