html怎吗和图片剧中,css中图片怎么居中？

在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让图片居中显示呢？下面本篇文章就来给大家介绍一下使用css设置图片居中的方法，希望对大家有所帮助。

1、使用background-position属性让背景图片居中

background-position 属性设置背景图像的起始位置，拥有两个值，分别代表：水平位置，垂直位置。

背景图片居中

*{margin: 0;padding:0;}

.demo{

width: 400px;

height: 300px;

margin: 50px auto;

border: 1px dashed #000;

background-image:url(3.jpg) ;

background-size:300px 200px ;

background-position:50% 50% ;

/*或 background-position:center center;*/

background-repeat:no-repeat ;

}

效果图：

2、使用弹性布局flex来让img图片居中

示例：

img图片居中

*{margin: 0;padding:0;}

.demo{

width: 400px;

height: 300px;

margin: 50px auto;

border: 1px dashed #000;

display: flex;

justify-content: center;

align-items: center;

}

.demo img{

width: 200px;

height: 150px;

}

效果图：

设置display: flex;实现flex弹性布局，在设置justify-content: center;让图片水平居中对齐，设置align-items: center;让图片垂直居中对齐。