如何讓登錄表單水平居中？

登錄表單為子盒子，外面設置一個父盒子。 

子絕父相盒子定位。

平常經常用得到，做一下記錄

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