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.
Comentarios