css 水平垂直居中方法

博主今晚实在是无聊，正好公司这边做前端事情比较少。。
今天就来大概讲一下css水平垂直居中吧，估计好多人都特别懊恼，网上的资料都不是很全，所以我就来送一波福利啦～

1. flex
   弹性布局flex相信大家都不陌生吧？ 那么，通过下面几行，就可以实现水平垂直居中啦

   display:flex;
   justify-content:center;
   align-item:center;

   注意：这个是在父元素上设置
   我们需要知道的是align-item是垂直方向上的居中哦

2. transform
   transform是css3的新属性，大家有空一定要多去了解哦
   话不多说，送上代码～

   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);

   注意：这个是在子元素上设置

好啦，这两个应该是最简洁的方式了，当然肯定还有很多其它的方法