Vertical centering of CSS under absolute positioning

Text image vertically centered in the upper left corner of the window in a div with variable width and height

The main problem is that in the case of Div display Display:block, the text height is uncertain, there is no way to do with the left picture fixed size Vertical Center method, top:50% to vertical center

The vertical centering of the left and right parts is achieved directly at the beginning, but it cannot be displayed properly because of the display:flex of the Show () and FadeIn ().

So finally in the part of the text set a layer of Div, and then the outer div #message_content display for flex, so that the outermost display is not affected by the hidden.

To summarize, when vertical centering is not possible, multiple sets of Div

#message{Border:#333333 5px Solid;Z-index: -;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%; }

<DivID= "message"style= "width:200px; height:100px; display:block;">
<Divclass= "icon Error"></Div>
 　　　 <Divstyle= "width:150px;"ID= "Message_content">
<Divclass= "text">Send you a jquery messager message popup plugin!</Div>
</Div>
</Div>

Vertical centering of CSS under absolute positioning