利用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。