结构与布局-垂直居中

<style>
     /*第一种*/
        /*main{
            18em;height:6em;position: absolute;top:50%;left:50%;
            margin-left:-9em;margin-top:-3em;background: #631082;
            text-align: center; 
        }*/
        /*第二种*/
        /*main{
            position: absolute;
            top:calc(50% - 3em);
            left:calc(50% - 9em);
             18em;
            height:6em;
            background: #129074;
            color:#fff;
        }*/
        /*  第三种*/
        /*main{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            background: #96770a;
        }*/
        /*第四种*/
        /*main{
             18em;
            padding: 1em 1.5em;
            margin: 50% auto 0;
            margin: 50vh auto 0;
            transform: translateY(-50%);
            background: #823810;
        }*/
        /*第五种*/
        body{
            display: flex;
            min-height: 100vh;
            margin: 0;
        }
        main{margin:auto;background: #91149c;}
        /*第六种 然而并没有居中*/
        /*main{
            display: flex;
            align-items: center;
            justify-content: center;
            18em;
            height:10em;
            background: #980f26;
        }*/

    </style>
原文地址:https://www.cnblogs.com/pikachuworld/p/10721115.html