O que o auto faz na margem: 0 auto?

126

O que autofaz em margin:0 auto;?

Eu não consigo entender o que autofaz. Eu sei que às vezes tem um efeito de centralizar objetos. Obrigado.

css Jitendra Vyas
fonte

Respostas:

189

Quando você especifica um widthno objeto ao qual se candidatou margin: 0 auto, o objeto fica centralmente dentro do contêiner pai.

A especificação autocomo o segundo parâmetro basicamente diz ao navegador para determinar automaticamente as margens esquerda e direita, o que é feito definindo-as igualmente. Garante que as margens esquerda e direita serão definidas para o mesmo tamanho. O primeiro parâmetro 0 indica que as margens superior e inferior serão definidas como 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Portanto, para dar um exemplo , se o pai tiver 100px e o filho tiver 50px, a autopropriedade determinará que há 50px de espaço livre para compartilhar entre margin-lefte margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

O que daria: 

margin-left:25;
margin-right:25;

Dê uma olhada neste jsFiddle . Você não precisa especificar a largura pai, apenas a largura do objeto filho.

djdd87
fonte
mas nunca definimos nenhuma largura para bodye sempre damos widthe margin:0 autopara#wrapper
Jitendra Vyas
ok, a margem entre o corpo e o objeto será calculada automaticamente pelo navegador.
Jitendra Vyas
Existe algum valor semelhante em %? Quero dizer que há qualquer outra propriedade no css que pode dar mesmo resultado como esquerda e direitaauto
Jitendra Vyas
@GenericTypeTea - e o que acontece em margin:auto 0condições?
Jitendra Vyas
No entanto, por que quando eu uso a margem: 20 auto isso parece afetar o posicionamento esquerda-direita? Parece que tudo que fiz foi add superior / margem inferior ...
pitosalas
13

auto: o navegador define a margem. O resultado disso depende do navegador

margin: 0 auto especifica

* top and bottom margins are 0
* right and left margins are auto
canela
fonte
9

Na especificação CSS em Calculando larguras e margens para elementos não substituídos no nível do bloco no fluxo normal :

Se 'margin-left' e 'margin-right' forem 'auto', seus valores usados ​​serão iguais. Isso centraliza horizontalmente o elemento em relação às arestas do bloco de contenção.

quiabo
fonte
"seus valores usados ​​são iguais" quais são os meios disso?
Jitendra Vyas
3
@ metal-gear-solid - Se a largura dos pais (determinada pelo navegador ou pela largura especificada) for 100 px e a largura da div de seu filho for 50 px. A margem: 0 auto determinará que há 50px de espaço disponível. Em seguida, dividirá isso por 2, resultando em 25. A margem esquerda e direita são ambas definidas para 25, ou seja, os valores são definidos igualmente.
djdd87
1
Os valores usados ​​se referem aos valores realmente usados, dependendo das propriedades visuais reais do elemento que usa essa propriedade e seu bloco contendo. A seção vinculada possui uma fórmula usada para calcular a diferença horizontal entre um elemento e seu bloco contendo. Essa diferença é cuspida igualmente e usada como os valores reais da margem horizontal.
Gumbo
6 
margin:0 auto;

0é para o canto superior direito e autoesquerdo-direito. Isso significa que as margens esquerda e direita terão margem automática de acordo com a largura do elemento e a largura do contêiner.

Geralmente, se você deseja colocar algum elemento na posição central, ele margin:autofunciona perfeitamente. Mas isso só funciona em elementos de bloco.

user3237573
fonte
1 
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 é para cima-inferior e automático para esquerda-direita. O navegador define a margem.

jaffer sathick
fonte
1

Torna-se mais claro com algumas explicações de como os dois valores funcionam.

A propriedade margin é uma abreviação para:

margin-top
margin-right
margin-bottom
margin-left

Então, como vêm apenas dois valores?

Bem, você pode expressar margem com quatro valores como este:

margin: 10px, 20px, 15px, 5px;

o que significaria 10 px superior, 20 px direita, 15 px inferior e 5 px à esquerda

Da mesma forma, você também pode expressar com dois valores como este:

margin: 20px 10px;

Isso daria a você uma margem de 20 px na parte superior e inferior e 10 px na esquerda e na direita.

E se você definir:

margin: 20px auto;

Isso significa margem superior e inferior de 20 px e margem esquerda e direita de automático. E automático significa que a margem esquerda / direita é definida automaticamente com base no contêiner. Se o seu elemento é um elemento do tipo bloco, o que significa que é uma caixa e ocupa toda a largura da visualização, então define automaticamente as margens esquerda e direita da mesma forma e, portanto, o elemento é centralizado.

Angus Comber
fonte
-3

É um substituto quebrado / muito difícil de usar para a tag "center". É útil quando você precisa de tabelas quebradas e centralização não funcional para blocos e texto.

Danny
fonte