元素垂直居中的几种方法:
方法一：设置height和line-height
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：
Document
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
文本垂直居中原理
方法二：display:table-cell和vertical-align
组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。这在子元素不确定宽高和数量时，特别实用！
Demo001_displayTable
/*** table-cell middle center组合使用 ***/
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
我爱你
我爱你
亲爱的中国
我爱你
亲爱的中国
div(inline-block)
方法三：display:flex;
以前div内部的文字垂直居中，使用height = line-height，现在可以使用display:flex来实现了
.div{
display:flex;
align-items:center;
}
使用div类，不仅可以实现div内部的文字居中，还可以使内部的div也垂直居中.
body{margin: 0; padding: 0 ;}
.header,.footer{height: 100px;background-color:#ccc;}
.cc{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #ccc;
min-height: calc(100vh - 200px);
}
by lpycontentby lpy
方法四：display:-webkit-box
这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
Content here
方法五：相对定位和绝对定位
利用给父元素设置相对定位，子元素设置绝对定位、margin: auto 0;和top: 0; bottom: 0;实现垂直居中；
原理：因为auto关键词默认自动分配剩余空间，宽度相对window是固定的，所以margin: 0 auto;可以有水平居中的效果，而高度相对window并不是固定的，所以margin: auto 0;不能垂直居中，所以让子元素的上下margin值不相对于window进行计算，改为相对父元素进行计算即可让margin: auto 0;生效；
#outer{
position: relative;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
