Caso não seja necessário um suporte p/para o IE8Internet Explorer 8 ou o projeto seja mais flexível também é possível utilizar o seguinte código:
.vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%); // Adicionar os prefixos.
}
.vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%); /* Adicionar os prefixos dos navegadores */
}
Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Também vale lembrar que o uso do display tabledisplay:table
não funciona com floatfloat
.
Uma outra solução, p/para quem precise dar suporte abaixo do IE8Internet Explorer 8:
.vertical-align {
display: block;
}
.vertical-align > div {
display: block;
position: relative;
margin-top: inherit;
clear: ~'expression(style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"), style.clear = "none", 0)';
}
.vertical-align {
display: block;
}
.vertical-align > div {
display: block;
position: relative;
margin-top: inherit;
clear: ~'expression(style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"), style.clear = "none", 0)';
}
Outra solução caso o suporte ao IE6Internet Explorer 6 seja necessário:
.vertical-align {
position: relative;
}
.vertical-align > div {
position: absolute;
top: 50%;
}
.vertical-align > div > div {
position: relative;
top: -50%;
}
.vertical-align {
position: relative;
}
.vertical-align > div {
position: absolute;
top: 50%;
}
.vertical-align > div > div {
position: relative;
top: -50%;
}
Fonte - http://css-tricks.com/vertically-center-multi-lined-text/