方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 图片在DIV中垂直居中的显示方法</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.juzhong{
width: 400px;
height: 400px;
display: flex;
float: left;
justify-content: center;/*在主轴上的对齐*/
align-items: center;/*在交叉轴上中心点的对齐*/
}
/*img{
width: 100%;
}*/
</style>
</head>
<body>
<div class="juzhong">
<img src="..."/>
</div>
<div class="juzhong">
<img src="..."/>
</div>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 图片在DIV中垂直居中的显示方法</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.juzhong{
width: 400px;
height: 400px;
float: left;
text-align: center;
}
.juzhong span{
height: 100%;
display: inline-block;
vertical-align: middle;
}
img{
vertical-align: middle;
}
/*文字超出部分省略号*/
.content div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="juzhong">
<span></span><img src="..."/>
</div>
<div class="juzhong">
<span></span><img src="..."/>
</div>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/16540.html