INICIO

CÓMO CENTRAR ELEMENTOS | TUTORIAL CSS

Para centrar elementos con CSS en la pantalla, hay diferentes técnicas. Depende de si queremos centrar un elemento horizontal o verticalmente. Depende de si se trata de un elemento de línea o de bloque. A continuación mostraré los casos más comunes, y cómo afrontar cada uno de ellos.

Centrar elemento horizontalmente

Poner en el centro un elemento de bloque

Para eso, tenemos que agregar márgenes izquierdo y derecho con el valor auto.

Obviamente, tenemos que especificar también un ancho, porque por defecto, los elementos de bloque tienen un ancho de 100% del contenedor, y centrar algo con ancho completo no tendría sentido práctico.

.elemento{
width:120px;
margin-left:auto;
margin-right:auto;
}

Para centrar un elemento de línea

La forma más rápida es diciéndole al elemento padre, que sus hijos se alineen al centro, con text-align:center;

.contenedor{
text-align:center;
}

O, como alternativa, podemos transformar el elemento de línea en un elemento de bloque y usar la misma técnica descrita en el caso anterior.

.elemento{
display:block;
width:120px;
margin-left:auto;
margin-right:auto;
}

Dependiendo de la situación, será más cómodo y efectivo usar una opción u otra.

Centrar elemento verticalmente

La técnica descrita anteriormente (usando margen automático) no nos sirve para centrar los elementos en el alto de la pantalla. Sin embargo, vamos a ver una forma alternativa de hacerlo. Esto es, usando posición absoluta.

Básicamente lo que vamos a hacer es colocar el elemento de forma absoluta en la mitad de la pantalla. Después lo desplazaremos un poco hacia arriba para que quede perfectamente centrado.

.elemento{
position:absolute;
top:50%;
height:240px;
margin-top:-120px;
}

Nótese que hemos colocado un margin-top que es exactamente la mitad que el alto total del elemento. Esto es necesario porque al colocar el elemento en el 50% desde arriba, todo el alto del mismo quedará por debajo. Esto sucede porque en realidad lo que estamos posicionando es la línea superior del elemento. Nosotros tenemos que contrarrestar esto haciendo uso del margen superior negativo.

Desventaja: necesitamos conocer el alto del elemento.

Centrado vertical y horizontal en la pantalla

Haciendo uso de las técnicas mencionadas, podemos centrar un elemento en la pantalla completamente, tanto en el ancho como en el alto.

.elemento{
position:absolute;
top:50%;
left:50%;
height:240px;
width:300px;
margin-top:-120px;
margin-left:-150px;
}

En algunos casos necesitarás centrar elementos sin conocer el ancho o el alto.

Centrar elementos con dimensiones desconocidas

Para eso tienes un artículo aparte.

Ver: Centrar div con dimensiones desconocidas.