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

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

子绝父相盒子定位。

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

设置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博客