水平居中方案
1.行内元素,可以设置text-align属性
text-align:center
2.固定宽度块状元素，可以设置左右margin值为auto来使用
margin:0 auto;
3.不定宽度块状元素
子元素设置 position:relative 和 left:50%
垂直居中方案
1.可以通过top、bottom、right、left等属性使它在文档中发生位置偏移（注意，relative是不会使元素脱离文档流的，absolute和fixed则会！
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
2.CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
3.使用CSS3的弹性布局（flex）
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/