水平居中和垂直居中

水平居中方案

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的里的元素水平居中*/