一、问题
§. vertical-align middle 不生效的几种解决方式，图片居中几种方案
1.在父元素中增加display:table-cell，vertical-align 写在在父元素中
.btn{ display: table-cell; width: 200px; height: 200px; border: 1px solid #eee; text-align: center; vertical-align: middle; } .btn img{ width: 100px; } <div class="btn"> <img src="img/sh.png"> </div>
2.在父元素中增加空的span元素，并设置其高度为100%，vertical-middle居中 有效
.btn{ width: 200px; height: 200px; border: 1px solid #eee; text-align: center; } .btn span{ display: inline-block; vertical-align:middle; height: 100%; } .btn img{ width: 100px; vertical-align: middle; } <div class="btn"> <span></span> <img src="img/sh.png"> </div>
2. ul li 撑不起DIV
原文：https://www.cnblogs.com/xdot/p/12936389.html