实现不定高弹框的水平垂直居中

下面总结了四中方法，使用时将相应的注释去掉就可以了
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,
            body {
                margin: 0px;
                padding: 0px;
            }
            
            /*不定宽高的弹出框！！！！*/
            
            /*方法一：fixed + translate负百分比实现*/
            /*IE10才开始支持*/
            /*.div1{
                display:inline-block;
                background-color: cornflowerblue;
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }*/
            
            /*方法二：flex布局，兼容性更差*/
            /*IE11+*/
            /*html,body{
                height: 100%;
            }
            .container{
                min-height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .div1 {
                display: inline-block;
                background-color: cornflowerblue;
            }*/
            /*table布局*/
            
            /*方法三：利用text-align、vertical-align实现，兼容性强！*/
            html,
            body {
                height: 100%;
            }
            .container {
                height: 100%;
                text-align: center;
            }
            .container:before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            .div1 {
                display: inline-block;
                background-color: cornflowerblue;
                vertical-align: middle;
            }
            
            /*方法四：vw、vh结合table-cell,IE9+兼容*/
            /*html,
            body {
                height: 100%;
            }
            .container {
                height: 100vh;
                width: 100vw;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .div1 {
                display: inline-block;
                background-color: cornflowerblue;
            }*/
            
        </style>
    </head>

    <body>
        <div class="container">
            <div class="div1">
                <p>hhhhhhhhhhhh</p>
                <p>jjjjj</p>
                <p>kkkkkkkkkkkkkkk</p>
                <p>kkkkkkkkkkkkkkk</p>
                <p>kkkkkkkkkkkkkkk</p>
                <p>kkkkkkkkkkkkkkk</p>
            </div>
        </div>
    </body>
</html>
实现不定高弹框的水平垂直居中

猜你喜欢
