Lo que se necesita exactamente para "margen: 0 automático;" ¿trabajar?

Sé que la configuración margin: 0 auto;de un elemento se usa para centrarlo (izquierda-derecha). Sin embargo, sé que el elemento y su elemento primario deben cumplir ciertos criterios para que funcione el margen automático, y parece que nunca puedo obtener la magia correcta.

Entonces, mi pregunta es simple: ¿qué propiedades CSS deben establecerse en un elemento y su elemento primario para margin: 0 auto;poder centrar de izquierda a derecha al elemento secundario?

La parte superior de mi cabeza:

1. El elemento debe estar a nivel de bloque, por ejemplo display: blockodisplay: table
2. El elemento no debe flotar.
3. El elemento no debe tener una posición fija o absoluta ¹

Fuera de la cabeza de otras personas:

4. El elemento debe tener un widthque no sea auto²

Tenga en cuenta que todas estas condiciones deben ser ciertas para que el elemento esté centrado para que funcione.

¹ _{Hay una excepción a esto: si su fijo o elemento con posición absoluta tiene left: 0; right: 0, que se centrará en los márgenes de automóviles .}

² _{Técnicamente, margin: 0 autofunciona con un ancho automático, pero el ancho automático tiene prioridad sobre los márgenes automáticos y, como resultado, los márgenes automáticos se ponen a cero, por lo que parece que "no funcionan".}

Fuera de mi cabeza, necesita un width. Debe especificar el ancho del contenedor que está centrando (no el ancho principal).

Regla completa para CSS:

1. ( display: blockY widthno automático) Odisplay: table
2. float: none
3. position: relative

Fuera de mi cabeza, si el elemento no es un elemento de bloque, hazlo así.

y luego darle un ancho.

También funcionará con display: table: una propiedad de visualización útil en este caso porque no requiere que se establezca un ancho. (Sé que esta publicación tiene 5 años, pero aún es relevante para los transeúntes;)

Desde la parte superior de la cabeza de mi gato, asegúrese de que el divque está tratando de centrar no esté configurado width: 100%.

Si es así, las reglas establecidas en los divs secundarios son lo que importará.

Vaya a este ejemplo rápido que he creado jsFiddle . Espero que sea fácil de entender. Puede usar un wrapperdiv con el ancho del sitio para centrar la alineación. La razón por la que debe indicarlo widthes que el navegador sabe que no va por un diseño líquido.

Aquí está mi sugerencia:

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;

Quizás sea interesante que no tenga que especificar el ancho de un <button>elemento para que funcione, solo asegúrese de que tenga display:block: http://jsfiddle.net/muhuyttr/

Para cualquiera que acabe de responder esta pregunta y no pueda solucionarlo margin: 0 auto, he aquí algo que descubrí que puede encontrar útil: un tableelemento sin ancho especificado debe tener display: tabley no display: block paramargin: auto poder trabajar. Esto puede ser obvio para algunos, ya que la combinación de display: blocky el widthvalor predeterminado dará una tabla que se expande para llenar su contenedor, pero si desea que la tabla tome su ancho "natural" y esté centrada, necesitadisplay: table