CSS - marginauto; - Como funciona

Usando margem: auto centralizar um elemento de bloco horizontalmente é uma técnica bem conhecida. Mas você já se perguntou por que ou como funciona? Para responder a isso, primeiro precisamos dar uma olhada em como margem: auto funciona. Também no mix é o que auto pode fazer nas margens, se funciona para centralização vertical, e alguns outros problemas.

Mas primeiro, o que auto na verdade?

A definição de auto varia com elementos, tipos de elementos e contexto. Nas margens, auto pode significar uma de duas coisas: ocupar o espaço disponível ou 0 px. Esses dois vão definir layouts diferentes para um elemento.

"auto" ocupando espaço disponível

Este é o uso mais comum de margem auto nos deparamos com freqüência. Atribuindo auto para as margens esquerda e direita de um elemento, elas ocupam o espaço horizontal disponível no contêiner do elemento igualmente - e assim o elemento fica centrado.

No entanto, isso funcionará apenas para margens horizontais (mais porque mais tarde), e também não vai funcionar com flutuou e elementos inline e por si só, também Não pode trabalhar em absoluto e elementos posicionados fixos (no entanto, vamos ver como fazer esses trabalhos).

Faux Float, ocupando espaço disponível

Desde a auto nas margens direita e esquerda ocupam o espaço "disponível" igualmente, o que você acha que acontecerá quando o valor auto é dado a apenas um daqueles?

Uma margem esquerda ou direita com auto ocupará todo o espaço "disponível" fazendo com que o elemento pareça ter sido liberado para a direita ou para a esquerda.

“auto” Calculado para 0 px

Como mencionado anteriormente, auto não funcionará em elementos flutuantes, inline e absolutos. Todos esses elementos já possuem decidiu em seus layouts, então não adianta usar auto para as margens e esperando que ele fique centrado apenas assim.

Isso irá derrotar o propósito inicial de usar algo como flutuador. Conseqüentemente auto terá um valor de 0px nesses elementos.

auto também não funcionará em um elemento de bloco típico se não tiver largura. Todos os exemplos que mostrei até agora têm larguras.

Uma largura de valor auto terá 0px margens. A largura de um elemento de bloco normalmente cobre seu contêiner quando é auto ou 100% e, portanto, uma margem auto será computado para 0px nesse caso.

O que acontece com as margens verticais com o valor auto?

auto nas margens superior e inferior é sempre calculado para 0px (exceto para elementos absolutos). Especificação W3C diz assim:

“E se “margem superior” ou “margem de fundo” é “auto”, o valor usado é 0 "

O porquê, bem, isso é até agora um mistério. Pode ser por causa do fluxo de página vertical típico, onde tamanho da página aumenta altura-sábio. Portanto, centralizar um elemento verticalmente em seu contêiner não fará com que pareça centralizado, em relação à própria página, ao contrário de quando é feito horizontalmente (na maioria dos casos).

E talvez seja por esse mesmo motivo, eles decidiram adicionar uma exceção para elementos absolutos que podem ser centralizados verticalmente ao longo de toda a altura da página..

Também poderia ser por causa do efeito colapso da margem (um colapso de elementos adjacentes” margens), que é outra exceção para as margens verticais.

No entanto, este último parece ser um caso improvável - desde elementos que não colapsam suas margens - como Floats, e elementos com transbordar outro que não seja visível, ainda atribuir 0px margens verticais para auto.

Centrando Elementos Absolutamente Posicionados

Como existe uma exceção para elementos absolutamente posicionados,”vou usar auto valor para centralizar um verticalmente e horizontalmente. Mas antes disso, precisamos descobrir quando margem: auto realmente funciona como queremos, em um elemento absolutamente posicionado.

É aqui que entra outra especificação do W3C:

"Se todos os três “esquerda”, “largura”, e “certo” está “auto”: Primeiro defina qualquer “auto” valores para “margem esquerda” e “margem direita” para 0… "

"Se nenhum dos três é “auto”: Se ambos “margem esquerda” e “margem direita” está “auto”, resolva a equação sob a restrição extra de que as duas margens obtenham valores iguais "

Isso praticamente diz que para horizontal auto margens para ocupar espaços iguais, o valores para esquerda, largura e certo não deveria ser auto , seu valor padrão. Então tudo o que temos a fazer é dar-lhes algum valor em um elemento absolutamente posicionado. esquerda e certo deveria valores iguais para uma centragem perfeita.

A especificação também menciona algo similar para margens verticais.

“Se todos os três “topo”, “altura”, e “inferior” são automáticos, definidos “topo” para a posição estática ... ”

“Se nenhum dos três for “auto”: Se ambos “margem superior” e “margem de fundo” está “auto”, resolva a equação sob a restrição extra de que as duas margens obtenham valores iguais… ”

Portanto, para um elemento absoluto ser centrado verticalmente, Está topo, altura, e inferior valores não devem ser auto.

Agora, combinando tudo isso, isso é o que nós”vai ter:

Conclusão

Se você quiser liberar um elemento em sua página para a direita ou para a esquerda sem os elementos a seguir envolvidos (como acontece com o float), lembre-se de que há a opção de usar auto para margens.

Converter um elemento em absoluto apenas para centralizá-lo verticalmente pode não ser uma boa ideia. Existem outras opções, como flexbox e CSS, que são mais adequadas para aqueles.