13 maneiras para o centro vertical

de volta aos bons velhos tempos, os limites de CSS foram tais que mesmo coisas “simples” como centralização vertical representava um desafio, com alguns de nós mesmo confiando em soluções JavaScript. Era frágil, era muito limitada, e sempre houve uma exceção que a fez falhar.se estávamos tentando alinhar um ícone ou imagem ao lado do texto, criar um desses banners populares de “herói”, ou uma sobreposição modal, centralizar as coisas no eixo vertical sempre foi uma luta.

mas o CSS percorreu um longo caminho desde então, fornecendo muitos métodos que tornaram a centralização vertical mais fácil a cada vez. Aqui está um resumo de alguns deles, junto com seus casos de uso e limitações.

posicionamento absoluto e margem auto

um elemento sem tamanho intrínseco pode ser “centrado” simplesmente usando valores iguais do topo e do fundo. Quando o elemento tem dimensões intrínsecas podemos usar 0 para cima e para baixo, em seguida, aplicar margem auto. Isto irá centralizar automaticamente o elemento:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

ver a caneta
Centrando 1: positioning by Facundo Corradini (@facundocorradini)
on CodePen.

a limitação é, naturalmente, que a altura do elemento deve ser explicitamente declarada, ou ocupará todo o recipiente.

o clássico top 50% traduz -50%

Este é um dos primeiros, e ainda um go-to, para muitos desenvolvedores. Um truque simples, baseando-se no posicionamento absoluto o elemento interno em 50% a partir do topo de seu pai, em seguida, a tradução é até 50% de sua altura:

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

Veja a Caneta
Centralização 2: top 50 translateY -50 por Facundo Corradini (@facundocorradini)
no CodePen.

uma abordagem bastante sólida, com a única limitação principal sendo o uso de translate que pode ficar no caminho de outras transformações, por exemplo, ao aplicar transições/animações.

tabelas. Sim, acabei de dizer mesas.

uma abordagem realmente simples e uma das primeiras (de volta ao dia, tudo era tabelas), está usando o comportamento das células da tabela e vertical-alinhar para centro de um elemento no recipiente.

Isto pode ser feito com tabelas reais (vergonha, vergonha, vergonha), ou usando a semântica do HTML, alternar a exibição do elemento table-cell:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Veja a Caneta
Centralização 3: tabelas de Facundo Corradini (@facundocorradini)
em CodePen.isto funciona mesmo quando ambos os elementos são de altura desconhecida. A maior limitação é, claro, se você precisa ter um irmão não-centrado, e pode ficar complicado com os limites de fundo.

também, tenha em mente que isso falha totalmente nos leitores de tela (mesmo que a sua marcação é baseada em divs, configurando a exibição CSS para a tabela e tabela-célula fará com que os leitores de tela interpretá-lo como uma tabela real). Longe do melhor quando se trata de acessibilidade.

O fantasma método do elemento

Outro oldie, que não apanhar por qualquer motivo, é utilizar inline-block com um fantasma (pseudo) elemento que tem 100% da altura do pai, em seguida, definir o vertical-align propriedade médio:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Veja a Caneta
Centralização 4: método do elemento fantasma por Facundo Corradini (@facundocorradini)
no CodePen.

na verdade funciona muito bem, com o mais perceptível “gotcha” sendo que ele move o centro horizontal apenas um pouco para a direita, por causa do comportamento sempre mesquinho de espaço em branco entre elementos em bloco.

Este pode ser tratado como seria com o inline-block problema em qualquer outro contexto, a abordagem mais simples de ser a margem-esquerda -1ch que eu usei acima (embora isso não seja 100% preciso, exceto em tipos de letra não proporcional, como ch unidade significa que a largura do caractere “0”), ou definir o tamanho do tipo de letra a 0 sobre o recipiente, em seguida, reiniciá-lo, para px ou rem sobre o elemento. Não é o ideal, pelo menos.

margem auto em um flex-item

finalmente entrando no moderno território CSS, flexbox introduziu um comportamento impressionante para as margens automáticas. Agora, não apenas na horizontal do centro do elemento, como fez no bloco de layouts, mas também no centro no eixo vertical:

.container{ display:flex;}.element{ margin:auto;}

Veja a Caneta
Centralização 5: margin:auto em um flex-item Facundo Corradini (@facundocorradini)
em CodePen.

esta tática é uma das minhas favoritas por causa de sua simplicidade, a única limitação maior é que ele só vai trabalhar com um único elemento.

Pseudo-elementos em um flex-recipiente

Não é o mais prático no mundo, mas também podemos utilizar flexível, vazio pseudo-elementos para empurrar o elemento para o centro:

.container{ display:flex;}.element{ margin:auto;}

Veja a Caneta
Centralização 6: pseudos em um flexbox por Facundo Corradini (@facundocorradini)
em CodePen.

isto pode ser útil quando queremos manter um espaçamento flexível num contentor flex orientado a colunas com vários itens.

7 & 8. Alinhar com o flex-container ou o flex-item

Flexbox também introduziu propriedades de alinhamento realmente grandes (que agora são bifurcados em seu próprio módulo de alinhamento de caixa). Isto permite-nos controlar como os itens são colocados e como o espaço vazio é distribuído de formas que teriam exigido tanto números mágicos em CSS para um número específico de elementos (ou um JS bastante inteligente para quantidades dinâmicas).dependendo da direção flex, podemos usar justify-content ou alinhar-itens para ajustar conforme necessário.no recipiente:

.container{ display: flex; justify-content: center; align-items: center;}

See the Pen
Centering 7: align on flex-container by Facundo Corradini (@facundocorradini)
on CodePen.

On a particular Flex-item:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

See the Pen
Centering 8: align on flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

não há muitos aspectos negativos nisto, excepto se precisar de suportar navegadores mais antigos. IE 11 deve funcionar, mas sua implementação do flexbox é bastante buggy, por isso deve ser sempre tratado com cuidado extra. IE 10 requer trabalho adicional como é baseado em um antigo rascunho da especificação que tem sintaxe diferente, e requer o prefixo do Fornecedor-ms.

9 10. Alinhar na grelha-recipiente ou grade-item

CSS Grid inclui praticamente as mesmas opções de alinhamento como o flexbox, para que possamos usá-lo no grid-recipiente:

.container{ display: grid; align-items: center; justify-content: center;}

Veja a Caneta
Centralização 9: alinhar no grid-recipiente de Facundo Corradini (@facundocorradini)
em CodePen.

ou apenas numa grelha específica:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

falta de suporte de navegador legado é a única limitação para esta técnica.

See the Pen
Centering 10: align on grid-item by Facundo Corradini (@facundocorradini)
on CodePen.

Pseudo-elementos em um grid

da mesma forma para o flexbox alternativa, podemos usar uma linha de três grade com pseudo-elementos:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Lembre-se de que 1fr significa, na verdade, mín-máx(auto, 1fr), de modo que as linhas vazias não vai necessariamente levar a um terço da altura do recipiente. Eles vão entrar em colapso conforme necessário até o seu valor mínimo de auto, e sem conteúdo, significa 0.

See the Pen
Centering 11: grid + pseudos by Facundo Corradini (@facundocorradini)
on CodePen.

isto pode parecer uma abordagem tola, mas permite-nos facilmente fazer um dos meus truques favoritos da grelha CSS: combinar linhas fr com linhas minmax, o que fará com que as fr vazias colapsem primeiro, depois as mixmax. A Jenn Simmons tem excelentes exemplos disto.

so, having the pseudos take the fully-collapsible rows will allow the auto-placement algorithm to work its magic on our actual elements. Excepto se precisarmos de suporte IE, que não tem auto-posicionamento. O que nos leva para o próximo método…

Explícito grade de linha de posicionamento

CSS grid permite que os itens sejam explicitamente colocados em uma linha específica, para que a mesma grade de declaração, conforme acima, e o item colocado na segunda linha será suficiente:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Este pode funcionar para baixo para o IE10. Acredite ou não, ou seja, foi um dos primeiros e mais fortes apoiadores da rede CSS, enviando-o todo o caminho de volta em 2011 com IE10. É baseado em um rascunho muito antigo que tem uma sintaxe completamente diferente, mas podemos fazê-lo funcionar:

See the Pen
Centering 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

margem auto em um item de grade

similarmente à flexbox, a aplicação de margem-auto em um item de grade centra-o em ambos os eixos.

.container{ display: grid;}.element{ margin: auto;}

See the Pen
Centering 12: explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

Alguns (provável) futuro implementações

de Acordo com o CSS Alinhamento da Caixa de Módulo de nível 3 a especificação, alinhe-o conteúdo deve funcionar no bloco do eixo do bloco de recipientes e multicol contentores, para (se navegadores implementá-lo) deve ser capaz de centralizar o conteúdo de tais recipientes tal como fazemos em flex ou grade de contêineres.

conclusão