Centrando elementos HTML


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:
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]
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 usartext-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:
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 quealign-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.
Subscribe to my newsletter
Read articles from Frontend Club directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
