如何让高度自适应的div中的文字水平垂直居中

时间：2024-02-19 22:02:00

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;
}

 

相关文章