css中怎样把图片居中

在网页设计中，图片的位置往往需要对齐网页的整体布局，并且希望图片在浏览器中居中显示，这时候就需要用到CSS实现图片居中的功能。
CSS中实现图片居中的方法可以有很多种，下面我们来学习两种常用的方法。
第一种方法是使用display和margin属性，代码如下：

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

<div class="img-center">
    <img src="图片路径">
</div> 

解释一下上面代码中的CSS属性：
- display: flex; 将包含图片的div设置为flex布局；
- justify-content: center; 在水平方向上让图片居中对齐；
- align-items: center; 在垂直方向上让图片居中对齐；
- margin: auto; 将图片的外边距设置为auto，自动调整图片在水平和垂直方向上的对齐方式。
第二种方法是使用position和transform属性，代码如下：

<style>
    .img-center {
        position: relative;
    }
    .img-center img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="img-center">
    <img src="图片路径">
</div> 

解释一下上面代码中的CSS属性：
- position: relative; 将包含图片的div设置为相对定位；
- position: absolute; 将图片设置为绝对定位；
- left: 50%; 设置图片距离包含图片的div左侧的距离为50%；
- top: 50%; 设置图片距离包含图片的div顶部的距离为50%；
- transform: translate(-50%, -50%); 通过translate()函数将图片向左和向上移动50%的宽度和高度，即以图片的中心点为基准让图片居中。
综上所述，以上两种方法都可以实现图片居中的效果，具体使用哪种方法要根据具体的设计要求和UI布局来决定。