Skip to main content
removeu 19 caracteres do conteúdo
Fonte Link
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

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/

Caso não seja necessário um suporte p/ o IE8 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.
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display table não funciona com float.

Uma outra solução, p/ quem precise dar suporte abaixo do IE8:

.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 IE6 seja necessário:

.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/

Caso não seja necessário um suporte para o Internet 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 dos navegadores */
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display:table não funciona com float.

Uma outra solução, para quem precise dar suporte abaixo do 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)';
}

Outra solução caso o suporte ao Internet Explorer 6 seja necessário:

.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/

added 93 characters in body
Fonte Link
Kenny Rafael
  • 6,7mil
  • 3
  • 31
  • 60

Caso não seja necessário um suporte p/ o IE8 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.
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display table não funciona com float.

Uma outra solução, p/ quem precise dar suporte abaixo do IE8:

.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 IE6 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/

Caso não seja necessário um suporte p/ o IE8 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.
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display table não funciona com float.

Uma outra solução, p/ quem precise dar suporte abaixo do IE8:

.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 IE6 seja necessário:

.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/

Caso não seja necessário um suporte p/ o IE8 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.
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display table não funciona com float.

Uma outra solução, p/ quem precise dar suporte abaixo do IE8:

.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 IE6 seja necessário:

.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/

Fonte Link

Caso não seja necessário um suporte p/ o IE8 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.
}

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display table não funciona com float.

Uma outra solução, p/ quem precise dar suporte abaixo do IE8:

.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 IE6 seja necessário:

.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/