参考文章
    https://www.html.cn/archives/6308

    动态垂直居中对齐
    点击查看【codepen】

    对于动态高度的元素，可以实现真正的垂直居中对齐

    其他方式实现

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         * {
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    14.         html,
    15.         body {
    16.             height: 100%;
    17.         }
    19.         body {
    20.             width: 100%;
    21.             height: 100%;
    22.         }
    24.         /* 关键样式 */
    25.         .element {
    26.             text-align: center;
    27.             position: relative;
    28.             top: 50%;
    29.             transform: translateY(-50%);
    30.         }
    31.     </style>
    32. </head>
    34. <body>
    35.     <div class="element">
    36.         <p>你好</p>
    37.         <p>你好</p>
    38.     </div>
    39. </body>
    41. </html>