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:
- position: absolute;
- display: flex;
- 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;
{
Top comments (0)