Ir al contenido principal

Como alinear un elemento horizontalmente y verticalmente con CSS3

En realidad es muy sencillo centrar elementos con CSS3. Hay muchos blogs que dan respuestas muy incorrectas, cuando en realidad lo único que debemos hacer es rezarle a nuestro dios FLEX-BOX.
Lo primero que hay que hacer es aplicar flex a los displays de todos los contenedores de tu web, y manejarte con ello durante el resto del proyecto. Ejemplo:

Flexbox

HTML

<!DOCTYPE html>
<html>
<head>
                <link rel="stylesheet" type="text/css" href="styles.css">
                <title></title>
</head>
<body>
                <section class="contenedor">
                               <div class="centrado"></div>
                </section>
</body>
</html>

CSS

body{
                display: flex;
}
.contenedor{
                display: flex;
}
.centrado{
                display: flex;
}

Alinear Horizontalmente con CSS

Solo deberemos agregar una simple propiedad al contenedor de nuestro div.

.contenedor{
                display: flex;
                justify-content: center;
}

Si tenemos varios divs, “justify-content” nos ofrece algunas opciones que ayudarán a darle estilo al proyecto:

flex-start: Agrupa los elementos a la izquierda
flex-end: Agrupa los elementos a la derecha
center: Agrupa los elementos en el centro. Es justamente lo que estamos ejemplificando el día de hoy.
space-between: Centra los elemento pegando a los extremos dos de ellos, para dejar la mayor cantidad de espacio posible entre todos
space-around: Mi preferido. Deja el mismo espacio entre todos los elementos, pero también deja espacio con los márgenes. Este, junto con center, serán los que más utilizarás a lo largo de tu carrera.


Centrar verticalmente con CSS

Ya habiendo hecho lo anterior, solo debes dar un pequeño paso más. Nuevamente actuaremos sobre el contenedor.


.contenedor{
display: flex;
justify-content: center;
align-items: center;
}

Con align-items tenemos otras varias opciones:

flex-start: pega a la parte superior a los divs
flex-end: Lo mismo pero abajo
strech: fuerza al elemento a ocupar el 100% del alto, formando columnas con cana elemento
baseline: Bastante interesante, sin importar como queden los div, lo que hace esta propiedad es alinear todo tomando como base los textos. Si, bastante loco.


OK, esto fue todo. Es bastante sencillo espero que te haya sido de ayuda. Si necesitan algún tipo de ayuda pueden seguirme en mi facebook

Comentarios