方法一：
<!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>