¿Qué es exactamente lo que se necesita para que funcione “margin: 0 auto;”?

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

Entonces mi pregunta es simple: qué propiedades de CSS deben establecerse en un elemento y su elemento principal para el margin: 0 auto; al centro izquierda-derecha el niño?

La parte superior de mi cabeza:

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

Fuera de la cabeza de otras personas:

  1. El elemento debe tener un width que no sea auto 2

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


1 Hay una excepción a esto: si su elemento fijo o absolutamente posicionado ha left: 0; right: 0 left: 0; right: 0 , se centrará con márgenes automáticos .

2 Técnicamente, margin: 0 auto funciona con un ancho automático, pero el ancho automático tiene prioridad sobre los márgenes automáticos, y los márgenes automáticos se ponen a cero como resultado, haciendo que parezca 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: block Y width no automático) O display: table
  2. float: none
  3. position: relative

Hice un ejemplo para que puedas ver lo que está pasando, por lo que recuerdo, esto es todo lo que necesitas 🙂

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

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 sigue siendo relevante para los transeúntes;)

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; 

Ve a este ejemplo rápido que he creado jsFiddle . Hopefull es fácil de entender. Puede usar un div de wrapper con el ancho del sitio para alinearlo en el centro. La razón por la que debe ponerle width es para que el navegador sepa que no está buscando un diseño líquido.

En la parte superior de la cabeza de mi gato, asegúrate de que el div que intentas centrar no esté configurado en width: 100% .

Si lo es, entonces las reglas establecidas en los divs para niños son lo que importará.

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