O que exatamente é necessário para "margem: 0 auto;" trabalhar?

Eu sei que a configuração margin: 0 auto;de um elemento é usada para centralizá-lo (esquerda-direita). No entanto, eu sei que o elemento e seu pai devem atender a certos critérios para que a margem automática funcione, e eu nunca consigo acertar a mágica.

Portanto, minha pergunta é simples: quais propriedades CSS devem ser definidas em um elemento e em seu pai para margin: 0 auto;que o filho fique no centro esquerdo-direito?

Em cima da minha cabeça:

1. O elemento deve ser no nível do bloco, por exemplo, display: blockoudisplay: table
2. O elemento não deve flutuar
3. O elemento não deve ter uma posição fixa ou absoluta ¹

Em cima da cabeça de outras pessoas:

4. O elemento deve ter um widthque não seja auto²

Observe que todas essas condições devem ser verdadeiras se o elemento estiver centralizado para que ele funcione.

¹ _{Há uma exceção a isso: se seu elemento fixo ou absolutamente posicionado tiver left: 0; right: 0, ele será centralizado com margens automáticas .}

² _{Tecnicamente, margin: 0 autofunciona com uma largura automática, mas a largura automática tem precedência sobre as margens automáticas, e as margens automáticas são zeradas como resultado, fazendo parecer que elas "não funcionam".}

Do alto da minha cabeça, ele precisa de um width. Você precisa especificar a largura do contêiner que você está centralizando (não a largura pai).

Regra completa para CSS:

1. ( display: blockE widthnão automático) OUdisplay: table
2. float: none
3. position: relative

Em cima da minha cabeça, se o elemento não é um elemento de bloco - faça isso.

e depois dê uma largura.

Também funcionará com display: table - uma propriedade útil de exibição nesse caso, porque não requer que uma largura seja definida. (Eu sei que este post tem 5 anos, mas ainda é relevante para os transeuntes;)

Em cima da cabeça do meu gato, verifique se o que divvocê está tentando centralizar não está definido width: 100%.

Se for, as regras definidas nos divs filhos são o que importará.

Por favor, vá para este exemplo rápido que eu criei o jsFiddle . Espero que seja fácil de entender. Você pode usar uma wrapperdiv com a largura do site para alinhar ao centro. O motivo que você deve colocar widthé que, para que o navegador saiba que você não está optando por um layout líquido.

Aqui está a minha sugestão:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Talvez seja interessante que você não precise especificar a largura de um <button>elemento para fazê-lo funcionar - apenas verifique se ele possui display:block: http://jsfiddle.net/muhuyttr/

Para alguém que acabou de responder a essa pergunta e não conseguiu consertar margin: 0 auto, eis uma coisa que descobri que pode ser útil: um tableelemento sem largura especificada deve ter display: tablee não display: block para margin: autopoder funcionar. Isso pode ser óbvio para alguns, pois a combinação de display: blocke o widthvalor padrão fornecerá uma tabela que se expande para preencher seu contêiner, mas se você deseja que a tabela pegue a largura "natural" e seja centralizada, será necessáriodisplay: table