CSS水平垂直居中布局

第一种：主要css代码有两个

一个为text-align:center（内容居中），
另外一个为margin:0 auto；
其两个样式需要配合使用才能实现div盒子的居中显示排版。

第二种：

    display: flex;
    align-items: center;
    justify-content: center;

    flex布局要求父元素必须显示设置heights

第三种、Css3显威力

#container{
    position:relative;
}

#center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

http://www.zyy1217.com/2017/03/02/CSS%E5%90%84%E7%A7%8D%E5%B1%85%E4%B8%AD%E6%96%B9%E6%B3%95/