盒子垂直水平居中

无论是已知宽高还是未知宽高，对小伙伴们来说都不是问题，但是提笔忘字，手写忘词，就很搞笑了。所以今天就把几种方法都手写一遍，加深印象。

<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的方法，是更麻烦的，早期弹层我就是用这种方法实现的。不知道有没有更好的方法，简单且兼容好的办法，有的可以教教我。