垂直水平居中方案

1. js

计算元素比例实现

2.css

left:50%;
top:50%;
transform:translate(50%,50%)

3. flex

flex弹性盒模型(要注意兼容性 旧版为flexbox 新版为flex)
[display]:-webkit-flex;
[display]:flex;
[flex-direction]:row | row-reverse | column | column-reverse
[flex-warp]:nowarp | warp | warp-reverse
[flex-flow]:flex-direction flex-warp
[justify-content]:flex-start | flex-end | center | space-between | space-around
[align-self]:align-start | align-end | align-center | align-auto | align-baseline | align-stretch
[align-items]:flex-start | flex-end | flex-center | flex-baseline | flex-stretch
[align-content]:flex-start | flex-end | flex-center | flex-baseline | flex-stretch
[order]:num