每当我把脸贴到屏幕上用top和left一点一点的调整元素居中时，我的mentor就悄悄地凑到我耳边幽幽的来一句你这样能保证不同尺寸的手机都居中吗？吓死人了有木有，所以还是研究一下垂直居中的方法吧。
多年以来，垂直居中已经成为css领域的圣杯，同样也是前端开发圈内广为流传的笑话，原因在于它同时具备以下几条特征：
- 它是及其常见的需求
- 从理论上来看，它似乎极其简单
- 在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。
长久以来，为了解决这一绝世难题，前端开发者们禅精竭虑，琢磨出了各种解决方法，大多是并不实用，在本篇文章中，我们将探索现代css的强大威力，以全新的思路去攻克各种场景下的垂直居中问题。有几种技巧十分流行，但是这里** 不会探讨 **：
- 表格布局发：需要用到一些冗余的HTML元素。
- 行内块法： hack味道很浓。
如果你有兴趣，请看看这偏文章不为人知的居中方法;
首先，写下以下代码作为我们的起点：
效果如下：
我们先来看一个早期的垂直居中的方法，他要求元素具有具体的宽度和高度：
这段代码本质上做了这几件事情：先把这个元素的左上角放在视口的正中心，然后再利用负边距把它向左向上移动，从而把元素放在视口的正中心：这行代码还可以借助强大的calc函数去掉两行：
效果是很棒的：
这个方法** 最大的局限在于它要求元素的宽高是固定的 **，在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个元素的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了，但是遗憾的是，绝大多数css包括margin来说，百分比都是以其父元素的尺寸为基准进行解析的。
css领域有一个常见的现象，真正的解决方案往往来自于我们最意想不到的地方。在这个例子中，答案来自于css变形。当我们在translate函数中使用百分比时，它是以自身的宽度和高度进行换算和移动的，而这正是我们所需要的。接下来，只要换用基于百分比的css变形来对元素进行偏移，就不需要在偏移量中把元素的尺寸写死了：
看看效果：
完美QAQ。。。
假设我们不想使用绝对定位，，仍然可以采用translate()技巧来把这个元素以其自身宽高的一般进行移动，但是在缺少left和right的情况下，如何把这个元素的左上角放置在容器正中央呢？
第一反应是用margin，向下面这样：
但是会产生很离奇的效果：
** 原因在于margin的百分比值是以父元素的宽度作为解析基础的 **
幸运的是，如果只想把元素相对于视口居中，仍然是有希望的。css3定义了一套新的单位，称为视口相关的长度单位：
- VM：视口宽度
- VH ：视口高度
所以，可以如此写代码：
结果不出意料的完美：
还有，值得一提的是，基于flexbox的解决方案，这无疑是最佳的解决方案，因为flexbox【伸缩盒布局】是专门针对这类需求所设计的：
效果如下：
prefect！！！
当然，要是这个div内部有文字的话，可以使用justify-content和align-items属性来使它垂直居中：
效果：
ok，差不多就这些啦。
最后，帮我实习的公司打波招聘广告：
*** 酷家乐春招开始啦，小伙伴们快把简历砸过来吧～～～～
链接：http://wanzi319.legendh5.com/h5/kujiale.html?isappinstalled=0&from=timeline ***
本人的微信：mz975066610，内推请找我_
