1. 程式人生 > >如何讓高度自適應的div中的文字水平垂直居中

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

weight pos overflow 最大 高度 absolut abs 自己 left

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>

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