本文只摘录个人认为比较简单易懂，应用比较全面的方法，至于老弱残的IE 5，6，7 不在考虑范围
// 基本样式与html结构
.parent{
//width:200px;
// height:800px;
background:#000;
}
<div class="parent">
<div class="child" ></div>
</div>
1. flex 布局（new）
优点：设置简单，适合移动端使用
缺点：不支持老旧版本的浏览器，如Android 4.4 以下（鉴于目前市面上基本没有这么低级的Android版本了，缺点可忽略）
.parent{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.child{
}
2. flex 布局（old）
优点：基本能满足移动端需求，相对新 flex 布局浏览器支持度高
缺点：子元素必须是块级的元素
.parent{
display: -webkit-box;
display: box;
-webkit-box-pack: center;
box-pack: center;
-webkit-box-align: center;
box-align: center;
}
.child{
}
3 table-cell
优点：兼容 IE8 及以上，内容溢出会将父元素撑开，父元素不设置宽高会自动紧贴
缺点：父元素不支持margin属性，子元素不能是块级元素
.parent{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display:inline-block;
}
4. position: absolute + margin: auto
优点：兼容 IE8 及以上
缺点：父元素必须声明高度
.parent{
position:relative;
}
.child{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
5. position: absolute + translate
优点：代码量少
缺点：IE9以下，不支持transform属性的浏览器无法使用，父元素必须声明高度，可能干扰其他transform效果，某些情况下会出现文本或元素边界渲染模糊的现象
.parent{
position: relative;
}
.child{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
