登入框居中css

 <style type="text/css">
        *{margin: 0;padding: 0}
        html,body{height: 100%}     /*這裏很關鍵*/
 
        .outer-wrap{
            /*只有同時爲html和body設置height: 100%時，這裏的height才生效，
            並且隨瀏覽器窗口變化始終保持和瀏覽器視窗等高*/
            height: 100%;    
            position: relative;
            background-color: rgba(0, 0, 0, .5);
        }
        .login-panel{
            width: 400px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>

• felx 水平垂直居中

<div class="box">
     <section class="inner"></section>
</div>
`

.box {
       display: flex;
       justify-content: center; /* 水平居中 */
       align-items: center;     /* 垂直居中 */
       width: 1000px;
       height: 600px;
       border: 1px solid red;
   }
   .inner {
       width: 300px;
       height: 200px;
       background-color: red;
   }


``