利用vertical-align实现水平垂直居中弹窗

时间 2019-11-18

标签利用 vertical align 实现水平垂直中弹繁體版

原文原文链接

第一种用line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            position: fixed;
            background-color: #eeeeee;
            left: 0;
            right: 0;
            top:0;
            bottom:0;
            font-size: 0;
            text-align: center;
            line-height: 100vh;/*直接用100vh撑起幽灵元素，不用加div或者伪元素，其子元素须要充值line-height,其具体具备继承性*/
            overflow:auto;/*当弹窗的内容超出屏幕时还能够看到屏幕外的内容*/
        }
        .dialog{
            vertical-align: middle;
            display: inline-block;
            background-color: #fff;
                /*height: 2000px;*/
            font-size: 14px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="dialog">
       sdadsax
        <div>
            测试
        </div>
    </div>
</div>
</body>
</html>

第二种采用伪类或者加一个空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            position: fixed;
            background-color: #eeeeee;
            left: 0;
            right: 0;
            top:0;
            bottom:0;
            font-size: 0;
            text-align: center;
            overflow:auto;/*当弹窗的内容超出屏幕时还能够看到屏幕外的内容*/
        }
        /*这里的伪元素和这里的div（item）有种“幽灵空白节点”的感受，这是垂直居中的关键*/
        /*采用div的形式能够兼容IE7*/
        .item {
            content: '';
            display: inline-block;
            /*width: 200px;*/
            background-color: red;
            height: 100%;
            vertical-align: middle;
        }
        /*.container:after{*/
            /*content: '';*/
            /*display: inline-block;*/
            /*!*width: 200px;*!*/
            /*background-color: red;*/
            /*height: 100%;*/
            /*vertical-align: middle;*/
        /*}*/
        .dialog{
            vertical-align: middle;
            display: inline-block;
            background-color: #fff;
                /*height: 2000px;*/
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="dialog">
        dxasax
        <div>
          测试
        </div>
    </div>
    <div class="item">

    </div>
</div>
</body>
</html>