解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

       在CSS中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center ;如果它是一个块级元素，就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。

　　多年以来，垂直居中已经成为了CSS领域的圣杯，它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征：

              1）它是极其常见的需求。

              2）从理论上来看，它似乎极其简单。

              3）在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。

      接下来我们具体说明一下这三个方法的简单使用。

一、代码初始化

　   我们基于如下这段HTML代码，将id='content'的div元素在id='box'的div张垂直居中。