css 垂直居中

垂直居中
我最先想到的是使用Flex

display:flex;
aligin-items:center

而后中有不足，这样一来块中所有元素都居中了。甚是怪异。
随后 姑姑了一下。
有大神竟找到12中方式。一一参悟，受益良多。
稍后附上链接 供众位看官参透。
这里只做简单总结。

1. 使用绝对定位 position:absolute;。
   绝对定位可指定元素位置，通过top，bottom可控制其在垂直方向移动。
   但是居中的元素都会有宽度，要调整下其相对中线位置。
   i. 使用margin上下偏移元素自身高度一半。
   ii. 使用 transform: translate(1,-50%);
   iii. 使用margin:auto; 来设置偏移，前提需要top与bottom设置为相同的值 如top:0;bottom:0;或是top:333px;bottom:333px;
2. 使用flex布局

链接