如何讓高度自適應的div中的文字水平垂直居中
阿新 • • 發佈:2018-01-26
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中的文字水平垂直居中