css绝对定位下的垂直居中

 

 如图

窗口左上角实现文字宽高不定的div中文字图片垂直居中

主要问题是在div显示display:block的情况下，文字高度不定，没办法做到用像左边图片固定大小垂直居中的方法，top:50% 来垂直居中

一开始直接用display:flex来实现左右两部分的垂直居中，但是因为配合到jquery的show();fadeIn()等方法，就无法正常显示了

所以最后在文字的部分又套了一层div,然后外层的div  #message_content display 为flex，这样就不影响最外层的显示隐藏了。

总结一下，无法实现垂直居中时，要多套一层div

   #message {
            border: #333333 5px solid;
            z-index: 100;
            position: absolute;
            display: none;
            background: #ffffff;
            top: 10px;
            right: 10px;
            overflow: hidden;
        }

        #message_content {
            font-size: 16px;
            position: absolute;
            display: flex;
            align-items: center;
            left: 50px;
            height: 100%;
            color: #333333;
            text-align: left;
            overflow: hidden;
        }

        .text {
            vertical-align: middle;
        }

        .icon {
            position: absolute;
            left: 10px;
            margin-top: -15px;
            top: 50%;
            width: 33px;
            height: 30px;
        }

        .icon.error {
            background: url("./img/error.png") no-repeat;
            background-size: 100% 100%;
        }

<div id="message" style="width: 200px; height: 100px; display: block;">
　　　<div class="icon error"></div>
　　　<div style="width:150px;" id="message_content">
　　　　　<div class="text">送你一个Jquery Messager消息弹出插件！</div>
　　　</div>
</div>

 

转载于:https://www.cnblogs.com/silences/p/7090831.html