Como alinhar verticalmente no centro do conteúdo de uma div com largura / altura definidas?

93

Qual seria o método correto para centralizar verticalmente qualquer conteúdo em uma largura / altura definida div.

No exemplo existem dois conteúdos com alturas diferentes, qual a melhor forma de centrar verticalmente ambos utilizando a classe .content. (e funciona para todos os navegadores e sem a solução de table-cell)

Tenha algumas soluções em mente, mas gostaria de saber outras ideias, uma está usando position:absolute; top:0; bottom: 0;e margin auto.

Ricardo Rodrigues
fonte
2
Suas perguntas devem ser totalmente independentes. Caso contrário, quando o URL morrer, é inútil.
Sparky de
Provavelmente, mas naquela altura não tinha a solução que queria ... isto oferece mais opções
Ricardo Rodrigues
tl; dr em 2020 : display: flex; align-items: center;. Se você não quiser que ele seja centralizado horizontalmente, adicione flex-direction: column;.
Devin Burke

Respostas:

132

Eu pesquisei um pouco e pelo que descobri você tem quatro opções:

Versão 1: div pai com exibição como célula de tabela

Se você não se importa em usar display:table-cellno div pai, pode usar uma das seguintes opções:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Demonstração ao vivo


Versão 2: div pai com bloco de exibição e célula de tabela de exibição de conteúdo

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Demonstração ao vivo


Versão 3: div flutuante pai e div de conteúdo como célula de tabela de exibição

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Demonstração ao vivo


Versão 4: posição div principal relativa com posição de conteúdo absoluta

O único problema que tive com esta versão é que parece que você terá que criar o css para cada implementação específica. A razão para isso é que o div de conteúdo precisa ter a altura definida que seu texto preencherá e a margem superior será calculada a partir disso. Esse problema pode ser visto na demonstração. Você pode fazer com que funcione para cada cenário manualmente, alterando a% de altura do seu div de conteúdo e multiplicando-o por -.5 para obter o valor da margem superior.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Demonstração ao vivo

Josh Mein
fonte
1
A versão 2 é o que procuro, mas o conteúdo não fica centralizado verticalmente. Faz diferença o que areaestá contido ou quais contentconteúdos estão?
Shimmy Weitzhandler
61

Isso também pode ser feito usando display: flexapenas algumas linhas de código. Aqui está um exemplo:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Demonstração ao vivo

martin 36
fonte
1
@nihiser Somente se você também deseja centralizá-lo horizontalmente, ou se você tivesse definidoflex-direction: column
martin36
31

Eu encontrei essa solução neste artigo

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Funciona perfeitamente se a altura do elemento não for fixa.

N Kumar
fonte
1
JFYI, encontrei o mesmo artigo e usei essa abordagem. Tive que mudar a posição para absoluto para que funcionasse no Chrome.
Jack A.
@JackA. funciona com position: relativeno Chrome 62. Não tenho certeza de até onde isso vai.
Jared Smith
-7

margem: all_four_margin

fornecendo 50% para all_four_margin colocará o elemento no centro

style="margin: 50%"

você pode aplicá-lo para seguir também

margem: canto superior direito inferior esquerdo

margem: superior direito e inferior esquerdo

margem: superior e inferior direito e esquerdo

ao fornecer% apropriado, obtemos o elemento onde quisermos.

Lokesh
fonte
4
por favor, esclareça, seu texto parece um pouco fora do lugar e desarticulado.
Benjamin Trent
Resposta pouco clara com formulação inadequada e limitada a listar os valores possíveis para margin.
nuno