方法一、
子元素相对于父元素绝对定位，top和left分别是50%；子元素的margin-left和margin-top分别是自身的宽度和高度的一半的负数
如图所示：
方法二、
子元素相对于父元素绝对定位，top、bottom、left、right分别为0，子元素的margin设为auto;
如图所示
方法三、
父元素设置display: table-cell;vertical-align: middle;子元素设置margin: auto;
这种方法是让子元素作为一个整体垂直居中，并不能让单独指定某一个子元素垂直居中
方法四、
子元素相对定位，top和left分别是50%，transform: translate(-50%,-50%);
这种方式不会释放子元素在文档中所占的位置，原因是position:relative属性会使元素本身所占的位置保留(相对定位)
方法五、
子元素相对于父元素绝对定位，top和left分别占50%，transform: translate(-50%,-50%);
这种方式会释放子元素在文档中所占的位置(因为是绝对定位)
方法六、
flex布局
方法七、
flex布局
方法八、
flex布局
方法九、
flex布局
