flex布局对子div进行水平垂直居中方法：

  1. .contianer {
  2.     display: flex;
  3.     width: 100%;
  4.     height: 100vh;
  5.     background-image: url(../assets/login_bg.png);
  6.     background-size: 100% 100%;
  7.     /* 水平方向居中 */
  8.     align-items: center;
  9.     /* 垂直方向居中 */
  10.     justify-content: center;
  11. }
  13. .loginBox {
  14.     display: flex;
  15.     width: 450px;
  16.     height: 450px;
  17. }

完整示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <style>
  8.         /* 清除浏览器的默认样式 */
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         /* 根设置宽高为100% */
  15.         html,
  16.         body {
  17.             width: 100%;
  18.             height: 100%;
  19.             overflow: hidden;
  20.             background-color: chocolate;
  21.         }
  23.         .contianer {
  24.             display: flex;
  25.             width: 100%;
  26.             height: 100vh;
  27.             background-image: url(../assets/login_bg.png);
  28.             background-size: 100% 100%;
  29.             /* 控制子元素水平方向居中,如子div元素loginBox*/
  30.             align-items: center;
  31.             /* 控制子元素垂直方向居中,如子div元素loginBox */
  32.             justify-content: center;
  33.         }
  35.         .loginBox {
  36.             display: flex;
  37.             width: 450px;
  38.             height: 450px;
  39.             background-color: gold;
  40.              /* 控制子元素水平方向居中,如span元素 */
  41.              align-items: center;
  42.             /* 控制子元素垂直方向居中,如span元素 */
  43.             justify-content: center;
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div class="contianer">
  50.         <div class="loginBox">
  51.             <span>登录窗体</span>
  52.         </div>
  53.     </div>
  54. </body>
  56. </html>