居中

 1.元素水平垂直居中：

        position: absolute;

        width: 300px;

        height: 300px;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

2.文本垂直居中：

        line-height设置成height的值；

3.行内元素和文本水平居中：

        text-aglin：center；

4.行内元素垂直水平居中[利用最大内容区的行决定对齐，input/img常用]：

        div{ text-align:center;}

        div::after{

            display:inline-block;

            height:100%;

            content:"";

            width:0;

             vertical-align: middle;

        }

        img{ vertical-align: middle;}

5.元素垂直水平居中

        width: 200px;

         height: 50px;

        position: absolute;

            left: 50%;

            top: 50%;

            /*transform: translate(-50%,-50%); */ 未知宽高也能用，兼容性不好

            margin: -25px 0 0 -100px;