CSS居中的方法

div盒子的垂直水平居中布局：

第一种方法

水平居中 margin: 0 auto

垂直居中 父元素设置 display: table-cell; vertical-align: middle;（margin: 0 auto会失效）

                则子元素会全部垂直居中

---

第二种方法

父元素--设置相对定位 position: relative;

子元素--设置绝对定位 position: absolute;

              top: 50%，left: 50%，transform: translate(-50%, -50%); 或者

              top: 0; bottom: 0; left: 0; right: 0; margin: auto;

---

第三种方法

/*弹性布局的水平垂直居中的办法，只需要在父元素上加这三句*/

justify-content: center; /*子元素水平居中*/

align-items: center; /*子元素垂直居中*/

display: -webkit-flex;