css中怎样让图片居中显示

在网站开发中，对于图片的位置排布，让它居中是一个比较常见的需求，在使用CSS来实现的时候，有以下几种方法可以让图片居中显示。

方法一：使用text-align居中

img{
    display:block;
    margin:0 auto;
} 

方法二：使用position居中

.container{
    position:relative;
}
img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
} 

方法三：使用flex布局居中

.container{
    display:flex;
    justify-content:center;
    align-items:center;
} 

在使用以上方法时，需要注意一些细节：

1.为了让图片在居中的基础上自适应大小，可以在img的样式中添加max-width:100%;

2.第二种方法中，父元素一定要设置position:relative，否则图片会将整个页面居中。

有时候，我们的图片加载不出来，那么我们可以在CSS中加一个背景颜色，方便调试。

img{
    background-color:gray;
} 

通过以上方法，我们可以让图片轻松居中显示，方便美化网站排版。