If Internet Explorer 8 support is not required or the project is more flexible, you can also use the following code:
.vertical-align {
position: relative;
top: 50%;
transform: translateY(-50%); /* Adicionar os prefixos dos navegadores */
}
Source - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
It is also worth remembering that the use of display:table
does not work with float
.
Another solution, for those who need to support under Internet 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)';
}
Another solution if Internet Explorer 6 support is required:
.vertical-align {
position: relative;
}
.vertical-align > div {
position: absolute;
top: 50%;
}
.vertical-align > div > div {
position: relative;
top: -50%;
}
Source - http://css-tricks.com/vertically-center-multi-lined-text/
I predict that this will be a very common question in the future, so this question is a good candidate to be protected.
– Oralista de Sistemas
You could add some more information. For example, does your div have fixed width and height?. Some snippets of html/css would also be good.
– Onilton Maciel
Is this question resolved? If the answer that solves it is accepted.
– Miguel Angelo