DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Como puedo centrar un < div > ...?
Julio Santacruz
Julio Santacruz

Posted on • Updated on

Como puedo centrar un < div > ...?

Vamos a centrar un div

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

Image description

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);
        }
Enter fullscreen mode Exit fullscreen mode

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;
        }
Enter fullscreen mode Exit fullscreen mode

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)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: