Vamos a centrar un div

En esta entrada te muestro tres métodos diferentes para centrar el contenido de un div like a pro

Los métodos para centrar < div > son:

1. position: absolute;
2. display: flex;
3. display: grid;

Position: absolute..?

La propiedad 'position' de CSS especifica la manera en que un elemento es posicionado en el DOM. Las propiedades que tenemos disponibles son:

top, right, bottom, left

Estas propiedades establecen la position final de los elementos. Existen varios tipos de position, los mas comunes son.

static, relative, absolute, sticky

Centrar < div > con position: absolute;

 div{ position: absolute; top: 50%; left: 50%; transform: translate(-50, -50); } 

Display: flex...?

Desde el inicio, display flex es parte de FlexBox, es un set de propiedad 'nuevas' de HTML5, nos permite maquetar nuestros proyectos web de una manera mas sencilla e intuitiva (es mi propiedad favorita). FlexBox funciona como un elemento contenedor (flex container) que ordena y posiciona todos los elementos contenidos segun se le indique.

Centrar un < div > con display: flex;

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

Display: grid...?

A mi manera de entender como funcionan las cosas puedo decir que grid y flex son iguales y tienen el mismo objetivo, pero funcionan de manera diferente. Las propiedades Grid también se crearon para HTML5 y funciona como una cuadricula.

Centrar un con display: grid;

 div{ display: grid; display: grid; justify-content: center; align-content: center; } 

o

div{ display: grid; place-items: center; {