Una simple manera de centrar un elemento con css es dándole un margen automático, pero se tiene que tener en cuenta las siguientes cosas:
- > No tiene que heredar ni poseer flotación.
- > No se puede cuando su posición es absoluta o relativa.
- > El ancho del elemento a centrar debe ser menos al contenedor que se encuentra(obvio).
Si no declaramos ningún margen obtendriamos esto:
Pero al declarar un margen derecho automatico este ya se coloca en el centro:
Nota: Si a margin le hubiésemos dado directamente el valor “auto” este seria igual para top-right-bottom-left, pero al agregarle el 0 al principio el segundo valor es tomado como el margen derecho, y a mediada que se va agregando el margen se va agregando a inferior y luego el izquierdo.
- Para mas claridad:
- margin: 0; (es igual para top-right-bottom-left);
- margin: 0(top) 0(right) 0()bottom) 0(left);