无论是已知宽高还是未知宽高，对小伙伴们来说都不是问题，但是提笔忘字，手写忘词，就很搞笑了。所以今天就把几种方法都手写一遍，加深印象。
<div class="parent">
<div class="child"></div>
</div>
结构很简单，已知宽高的比较简单就不说了，就说说让未知宽高的child在父元素parent中水平垂直居中。
flex方法
flex方法最简单明了，低版本Ie不支持，有兼容性问题。
.parent{display:flex;justify-content:center;align-items:center;}
absolute定位
transform一样存在着兼容性问题
.parent{position: relative;}
.child{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
table布局上下文
table布局是不建议使用的方法了，而且使用起来麻烦，要多增一个标签模拟table，tr，td
<div class="parent">
<div class="box">
<div class="child"></div>
</div>
</div>
.parent{display:table;}
.box{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
inline-block+vertical-align+text-align
增加一个伪类，也相当于多了一个空标签
.parent{text-align:center;}
.parent:after{content:'';width: 0;height: 100%;display:inline-block;vertical-align:middle;}
.child{vertical-align:middle;display:inline-block;}
以上方法貌似都有一些瑕疵，还有一种js+margin+absolute的方法，是更麻烦的，早期弹层我就是用这种方法实现的。不知道有没有更好的方法，简单且兼容好的办法，有的可以教教我。
