Centrando elementos HTML

Frontend ClubFrontend Club
2 min read

Hay varias formas de centrar elementos HTML utilizando CSS. Aquí te explico algunas de las más comunes:

Centrado horizontal

Para centrar un elemento horizontalmente dentro de su contenedor, puedes usar las siguientes técnicas:

  1. Usando margin: auto y ancho especificado:

    Esto centra horizontalmente el elemento dentro de su contenedor si tiene un ancho especificado.

     .container {
         width: 200px; /* Ancho del elemento */
         margin: auto;
     }
    

    %[https://codepen.io/frontend-club/pen/xxoxQEw]

  2. Usando text-align: center para elementos en línea:

    Si el elemento que quieres centrar es un elemento en línea (como texto o elementos inline-block), puedes usar text-align: center en el contenedor:

     .container {
         text-align: center; /* centrado del elemento */
     }
    
     .elemento-inline {
         display: inline-block; /* elemento hijo */
     }
    

    %[https://codepen.io/frontend-club/pen/JjQjeEX]

Centrado vertical

Centrar verticalmente un elemento es un poco más complejo porque depende del contexto y del tamaño del contenedor. Aquí tienes una forma típica de hacerlo:

  1. Usando Flexbox:

    Flexbox es una forma moderna y efectiva de centrar elementos verticalmente:

    Asegúrate de que el contenedor tenga una altura definida (height) para que align-items: center pueda funcionar correctamente.

     .container {
         display: flex;
         justify-content: center; /* Centrado horizontal */
         align-items: center; /* Centrado vertical */
         height: 100vh; /* Altura del contenedor */
     }
    
     .card {
         /* Estilos del elemento */
     }
    

    %[https://codepen.io/frontend-club/pen/oNOrwae]

Centrado absoluto

Si necesitas centrar un elemento absolutamente dentro de su contenedor padre, puedes usar position: absolute junto con valores de posición y transform: translate(-50%, -50%) para ajustar el elemento al centro:

.container {
    position: relative; /* Importante: el padre debe tener posición relativa */
    height: 300px; /* Altura del contenedor */
}

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

Grid layout

Con CSS Grid Layout también puedes centrar elementos de manera efectiva:

.container {
    display: grid;
    place-items: center; /* Centra elementos dentro del grid */
    height: 300px; /* Altura del contenedor */
}

Conclusión

Existen varias técnicas CSS para centrar elementos HTML, tanto horizontal como verticalmente. Los métodos cubiertos incluyen el uso de margin: auto, text-align: center, Flexbox, posicionamiento absoluto y CSS Grid Layout para un centrado efectivo dentro de diferentes contextos y contenedores.

0
Subscribe to my newsletter

Read articles from Frontend Club directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Frontend Club
Frontend Club