建一个简单html模板：
<div class="box" style="height:100px;width:100px;text-align:center"> ??<span class="inner">line</span> <img src="" style="width:10px;height:10px;"/></div>
1.使用line-height
在div高度固定的情况下，并且不会换行的时候可以用。(注：如果出现换行，那么每一行都有容器那么高)
.box{ ??line-height:100px;}备注：img虽然是inline-block，有时候会发现并没有跟着span一起居中，这是因为vertical-align属性导致的需要加上:
.box img{ ?vertical-align:center; ?}2.flex弹性布局
.box{ ?display:flex; ?align-items:center; ?}3.display:table-cell
.box{ ?display:table-cell; ?vertical-align: middle;}css__div中 垂直居中
原文地址：https://www.cnblogs.com/xin-note/p/9603526.html