如何讓高度自適應的div中的文字水平垂直居中

1.在做數據展示的時候，因為后台沒有數據，為了提示用戶沒有數據，自己手寫了一個div中間顯示一個“暫無數據的字樣”，

然后控制顯示和隱藏，這樣方法有兩種：

第一種：設置display隱藏，但有一個問題，因為我的div中用了display:table-cell,所以起了沖突，

第二種：更改z-index的值 不顯示的時候設置0，顯示的時候設置最大值就行（推薦使用）

 

本文主要是探討，因為外層的div的寬度和高度是不固定，導致了文字不能水平垂直居中的問題，解決辦法：

        #big{
            width:100%;
            height:100%;
            font-size:32px;
            font-weight:bold;
            position:absolute;
            background-color:pink;
            overflow:hidden;
        }
        #big>p{
            position:absolute;
            width:130px;/**依據字體的寬度而定**/
            height:45px;/**依據字體的大小而定**/
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }


    <div id="big">
        <p>暫無數據</p>
    </div>

 

 

 

2.還有一種情況，高度不固定的塊計元素里面直接包裹一個文字，這種情況可以這么解決

<dl style="height:100%">
    <dt style="height:20%">測試問題居中問題</dt>
    <dd style="height:80%"></dd>
</dl>

解決：偽元素before

dt::before{
    content:'',
    height:100%;
    display:inline-block;
    vertical-align:middle;
}