这算是前端开发的基础之一，但是用到的地方不多，我也就没有深入研究，最近一个项目却突然需要实现这个效果，原本我是打算用js来计算边距，赋给内部的元素，但是这样太麻烦了很没必要，网上查询了一下，教程还是很多的，就是在不同浏览器的兼容上可能有问题。因为可能以后会用到，决定记录下来。
本文章参考thinkcss
html代码如下，需要img图片在类名为top-img的这个div内上下居中：
<div class="box">
<div class="top-img">
<img src="img/user-dj.png"/>
</div>
</div>
1.关键代码display:flex
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
CSS代码如下：
.box{width:100%;
height:100%;}
.top-img{width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
display:flex;
align-items:center}
.top-img img{width:100%;}
其它的代码都是补充样式，实现效果，但是请注意如下的css定义。
align-items:center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
所以，在以上两个样式的配合实现了上下的居中，但是主要定义类名top-img的div和其中的基本元素，而且不能具有div的性质。
2.关键代码display:table
display:table将元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
CSS代码如下：
.box{width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
display table}
.top-img{display:table-cell;
vertical-align:middle;}
.top-img img{width: 100%}
这种实现方式，将div变为了table表格的属性，而表格就可以通过vertical-align:middle实现上下居中，而以下是不同定义对应的表格标签属性。
display:table=>相当于“table”标签；
display:table-row=>相当于“tr”标签；
display:table-cell=>相当于“td”标签；
3.关键代码position:absolute
其实用position的fixed属性也是可以的，主要是借用css的定位属性，配合margin外边距实现。
CSS代码如下：
.box{width:100%;
height:100%;}
.top-img{width:100%;
height:100%;
position:relative;
background-color:rgba(0,0,0,0.7);}
.top-img img{width:100%;
height:200px;
top:50%;
margin-top:-100px;
position:absolute;}
什么原理呢，通过定位的定义借用top属性，让图片距离顶部正好50%，但是图片本身是具有高度的，所以会挤下来，于是在知道图片高度的情况下，可以设置margin-top的负数为图片高度的一般，但是如果不知道图片的高度，或者就是自动高度的情况下，可以通过CSS3代码transform:translateY(-50%)来实现向上移动图片本身高度的百分之五十。
position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom在父级内进行绝对定位。
总结：
以上三种方式都可以达成目的，但是在兼容上，通过定义为列表的属性可以获得绝大多数浏览器的支持，但是不便于用其它的css进行扩展，第一种办法最为简单，不过对IE以前的版本不提供支持，而第三种如果图片高度是固定的情况下，将具有良好的兼容和实现效果，毕竟任何版本浏览器都支持吗margin，但是如果在制作响应式网页，或者为了防止图片高度变形的时候，margin-top就无法得到准确值，用js获取就没有简便的意义了而transform:translateY是作为css3属性，老版IE是不兼容的。
所以，实际的使用过程中，要根据情况进行选择。
我最终的效果如下：
