1、使用background-position属性让背景图片居中
background-position 属性设置背景图像的起始位置，拥有两个值，分别代表：水平位置，垂直位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
background-image:url(3.webp) ;
background-size:300px 200px ;
background-position:50% ;
/*或 background-position:center center;*/
background-repeat:no-repeat ;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>效果图：
2、使用弹性布局flex来让img图片居中
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img图片居中</title>
<style>
*{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;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.webp" />
</div>
</body>
</html>效果图：
设置display: flex;实现flex弹性布局，在设置justify-content: center;让图片水平居中对齐，设置align-items: center;让图片垂直居中对齐。
以上就是css中图片怎么居中？的详细内容，更多请关注易知道|edz.cc其它相关文章！
