如何让登录表单水平居中？

登录表单为子盒子，外面设置一个父盒子。 

子绝父相盒子定位。

平常经常用得到，做一下记录

设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;

.parent {
         position:relative;
        }
.child {
         position: absolute;
         margin: auto;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
       }

flex布局：

.parent{
    display: flex;
    justify-content: center;    /* 水平方向 居中*/ 
    align-items: center;        /* 垂直方向 居中*/
    }

translate()：

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

　 .parent{

         position: relative;

        }

     .child{

       position: absolute; left: 50%; /* 父盒子宽度的50% */ top: 50%; /* 父盒子高度的50% */ transform: translate(-50%,-50%); /* 子盒子自身宽高的50% */

       }

参考：如何实现div盒子水平垂直居中_！！！！！的博客-CSDN博客