用JQuery使列表中的图片水平垂直居中显示

像案例中心这些放置小LOGO的地方，有些logo图片的尺寸都无法做到一致，也没功夫用PS统一尺寸，这时候可以使用line-height+text-align: center来自动居中，

在不使用line-height的情况下，用text-align: center和JS使小图片自动垂直居中，原理：

img的CSS：position: relative;然后用top：calc（50% - 图片高度的50%);来完成垂直居中。
然后用JS来完成计算每张图片的top。
.case .case_logo_ img{ width: 200px; position: relative; }

<div class="case">
		<div class="layout_container">
			<div class="row">
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<div class="col l3 m3 s6"><div class="case_logo_"><img src="img/2017123138052373.jpg" alt="万向集团" title="万向集团"></div></div>
				<script type="text/javascript">
					var case_l = $(".case .s6").length
					var caseDOM = $(".case .s6")
					console.log(case_l)
					for (var i = 0; i < case_l; i++) {
						var case_H = caseDOM.eq(i).find("img").height()
						var case_bH = caseDOM.eq(i).find("div").height()
						caseDOM.eq(i).find("img").css("top",(case_bH / 2) - (case_H / 2))
						console.log(case_H + "/=" +(case_H/2))
					}
				</script>
			</div>
			<a href="" class="more_btn transion">进入案例中心</a>
		</div>
	</div>

居中效果图：

这里统一使用了同样的图片，可以换图片试效果。
如果有什么地方错误，欢迎指出！