这篇文章我好像是在2018.08.24号收藏的。留到现在才开始认真看真的是对自己太无语了。
适用情景：单行文字垂直居中技巧
1.Line-height
line-height:100%
适用情景：多对象的垂直居中技巧
2.Line-height + inline-block
既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置，如此便可以达到垂直居中的目的了.
.ex2{
width: 500px;
border: 1px solid #f00;
line-height: 200px;
text-align: center;
}
.ex2 .content{
display: inline-block;
height: auto;
line-height:1;
width: 400px;
background: #ccc;
}
3.:before + inline-block
:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。
.ex3{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
}
.ex3::before{
content:'';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.ex3 .content{
width: 400px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
4.absolute + margin 负值
绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了。
缺点：需要知道垂直居中元素的宽和高
.ex4{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.ex4 .content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top:50%;
left: 50%;
margin-left: -200px;
margin-top: -35px;
}
5.absolute + margin auto
当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。
缺点:是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。
.ex5{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.ex5 .content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6.absolute + translate
在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。
.ex6{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.ex6 .content{
width: 400px;
background: #ccc;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
7.Flex + align-items
不由的说Flex真的是一个神物，我们只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了（说那么多结果重点就一行字是哪招啦），这个方式的优点是此层不需要设定高度即可自动居中，且原始代码干净无比，真的是用一次就让你升天啦。
.ex7{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.ex7 .content{
width: 400px;
background: #ccc;
}
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
8.Flex + align-self
align-self 应该大家都不陌生，基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。
.ex8{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
justify-content: center;
}
.ex8 .content{
width: 400px;
background: #ccc;
align-self: center
}
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
9.Flex + margin
由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中
.ex9{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
}
.ex9 .content{
width: 400px;
background: #ccc;
margin: auto;
}
10.Display：table-cell
这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中
.ex10{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.ex10 .content{
width: 400px;
background: #ccc;
margin: auto;
}
