How can I vertically centre text in a div of known height, but without setting the line-height attribute as the text may span more than one line?

How can I vertically centre an unknown quantity of text (may span multiple lines开发者_运维百科) in a div of known height. I know it can be done using the line-height property however this only works when there is only one line of text.

I think the only HTML that can automatically adjust text vertically is a table cell, so if you are using a div you can apply a little trick:

.align-vertically {
    display: table-cell;
    vertical-align: middle; 
}

in this way you will change the default display behavior, to make the div acting like a cell!

I have actually found the answer to what I need myself.

.info, .success, .warning, .error, .validation {  
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
}

.info {
color: #00529B;
background-color: #BDE5F8;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.warning {
color: #9F6000;
background-color: #FEEFB3;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}

The 'trick' so-to-speak is to not set a height for the div and just set padding/margins to do the centring.