// 方法一
思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，
// 优点：父元素（parent）可以动态的改变高度（table元素的特性）
// 缺点：IE8以下不支持
// .box1{
// display: table-cell;
// vertical-align: middle;
// text-align: center;
// }
// <div class="box box1">
// <span>垂直居中</span>
// </div>
// 方法二
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
// 优点：高大上,可以在webkit内核的浏览器中使用
// 缺点：不支持IE9以下不支持transform属性
// 方法三：
思路：使用css3 flex布局 里外两个元素,给外面的元素设置以下三个属性,里面的不用设置
// .parent{
// display: flex;
// justify-content: center;
// align-items: center;
// }
// 方法四：
思路:或者父元素display:flex,子元素直接margin:auto;完美解决
// 兼容ie６的水平垂直居中
// 1. 水平居中
// margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素，而是否作用于其他内联元素因浏览器不同而不同，此处可能为内联元素，所以避免使用。
// text-align:center; 可以让绝大多数的对象居中对齐，并且这个属性也获得了几乎全部浏览器的支持。
// 实际上，这个属性定义的是块级对象内部文字的对齐方式，内部的文字或者图像一般是内联对象
// 2. 垂直居中
// 垂直居中，对于固定高度的容器使用负margin的方法有效，对于高度不固定的情形使用 vertical-align 属性，
// 它定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
// 这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
