¿Te has preguntado alguna vez cómo centrar un div, un texto, una imagen o cualquier otro elemento con css? Si la respuesta es sí, entonces este artículo es para ti.
Centrar elementos con css es una de las tareas más comunes y a la vez más complicadas que se pueden hacer con este lenguaje de estilo. Existen diferentes formas de lograrlo, dependiendo del tipo de elemento, del contexto y del efecto que se quiera conseguir.
En este artículo te enseñaremos cómo centrar elementos con css de forma fácil y rápida, usando diferentes técnicas y propiedades.
También te mostraremos algunos ejemplos prácticos y algunos consejos para evitar errores comunes. Al final de este artículo serás capaz de centrar cualquier elemento con css sin problemas.
¿Qué significa centrar un elemento con css?
Antes de entrar en materia, es importante aclarar qué significa centrar un elemento con css. En general, se puede hablar de dos tipos de centrado: horizontal y vertical.
- El centrado horizontal se refiere a alinear el elemento en el centro del eje horizontal, es decir, de izquierda a derecha. Por ejemplo, si queremos centrar un texto dentro de un div, lo que buscamos es que el texto quede equidistante de los bordes izquierdo y derecho del div.
- El centrado vertical se refiere a alinear el elemento en el centro del eje vertical, es decir, de arriba a abajo. Por ejemplo, si queremos centrar una imagen dentro de un div, lo que buscamos es que la imagen quede equidistante de los bordes superior e inferior del div.
Además, se puede hablar de centrado bidimensional, que consiste en combinar el centrado horizontal y el vertical para alinear el elemento en el centro tanto del eje horizontal como del vertical.
Por ejemplo, si queremos centrar un div dentro de otro div, lo que buscamos es que el div hijo quede equidistante de los cuatro bordes del div padre.
A continuación te presentamos algunas de las técnicas más comunes y populares para centrar elementos con css:
Centrar un div horizontalmente con margin
Una forma de centrar un elemento horizontalmente es usar la propiedad margin con el valor auto. Esta propiedad se aplica al elemento que queremos centrar y hace que los márgenes izquierdo y derecho se ajusten automáticamente para ocupar el espacio disponible.
Por ejemplo, si queremos centrar un div dentro de otro div, podemos usar el siguiente código:
html
<div class="contenedor"><div class="centrado"><p>Este div está centrado horizontalmente dentro del div contenedor.</p></div></div>
css
div.contenedor {width: 80%;}div.centrado {width: 50%;margin: 0 auto;}
Esta técnica funciona con cualquier elemento de bloque que tenga un ancho definido. Sin embargo, tiene algunas limitaciones:
- Solo centra el elemento horizontalmente, no verticalmente.
- No funciona con elementos en línea ni reemplazables.
- Requiere que el elemento tenga un ancho menor que el del contenedor.
Centrar Elemento html con “display: flex” y “justify-content: center”
Esta técnica consiste en convertir el div en un contenedor flexible y usar la propiedad justify-content con el valor center para alinear el div en el centro del eje horizontal.
Por ejemplo, si queremos centrar un div dentro de otro div, podemos usar el siguiente código:
html
<div class="contenedor"><div class="centrado"><p>Este párrafo está centrado horizontalmente dentro del div contenedor.</p></div></div>
css
div.contenedor {display: flex;justify-content: center;/*Si quieres centrar verticalmente pudes usar la propiedad:align-items:center;*/}div.centrado {width: 50%;}
Esta técnica funciona con cualquier tipo y tamaño de div. Sin embargo, tiene algunas limitaciones:
- Solo centra el div horizontalmente, no verticalmente.
- Requiere un navegador moderno que soporte flexbox.
- Puede alterar el orden o la dirección de los elementos dentro del div.
Centrar un elemento verticalmente con line-height
Otra forma de centrar un elemento verticalmente es usar la propiedad line-height con el mismo valor que la altura del contenedor.
Esta propiedad se aplica al elemento que queremos centrar y hace que la altura de la línea sea igual a la altura del contenedor, lo que provoca que el elemento se alinee en el centro del eje vertical.
Por ejemplo, si queremos centrar una imagen dentro de un div, podemos usar el siguiente código:
html
<div><img src="logo.png" alt="Logo"></div>
css
div {height: 200px;line-height: 200px;}img {vertical-align: middle;}
Esta técnica funciona con cualquier elemento en línea o reemplazable que tenga una altura menor o igual que la del contenedor. Sin embargo, tiene algunas limitaciones:
- Solo centra el elemento verticalmente, no horizontalmente.
- No funciona con elementos de bloque ni con texto multilínea.
- Requiere que el elemento tenga una altura definida o conocida.
Centrar un elemento bidimensionalmente con position y transform
Una forma de centrar un elemento bidimensionalmente es usar las propiedades position y transform. Esta técnica consiste en posicionar el elemento de forma absoluta respecto al contenedor y luego aplicarle una transformación para desplazarlo al centro.
Por ejemplo, si queremos centrar un div dentro de otro div, podemos usar el siguiente código:
html
<div class="contenedor"><div class="centrado"><p>Este div está centrado bidimensionalmente dentro del div contenedor.</p></div></div>
css
div.contenedor {position: relative;}div.centrado {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
Esta técnica funciona con cualquier tipo de elemento y no requiere conocer sus dimensiones. Sin embargo, tiene algunas limitaciones:
- Requiere que el contenedor tenga una posición relativa o absoluta.
- Altera el flujo normal de los elementos y puede provocar solapamientos o espacios vacíos.
- Puede afectar al rendimiento o a la calidad de la imagen si se usa con animaciones o transiciones.
Centrar div con “display: grid” y “place-content: center”
Esta técnica consiste en convertir el div en un contenedor de cuadrícula y usar la propiedad place-content con el valor center para alinear el div en el centro tanto del eje horizontal como del vertical.
Por ejemplo, si queremos centrar un div dentro de otro div, podemos usar el siguiente código:
html
<div class="contenedor"><div class="centrado"><p>Este div está centrado bidimensionalmente dentro del div contenedor.</p></div></div>
css
div.contenedor {display: grid;place-content: center;}div.centrado {width: 50%;}
Esta técnica funciona con cualquier tipo y tamaño de div. Sin embargo, tiene algunas limitaciones:
- Requiere un navegador moderno que soporte grid layout.
- Puede alterar el número o el tamaño de las filas y columnas del div.
Centrar elementos con css es fácil si sabes cómo
Como has visto, centrar elementos con css es una tarea muy común y muy útil para mejorar la apariencia y la funcionalidad de tus páginas web.
Existen muchas técnicas para lograrlo, cada una con sus pros y sus contras. Lo importante es elegir la que mejor se adapte a tus necesidades y a tu proyecto.
En este artículo has aprendido algunas de las técnicas más populares y efectivas para centrar elementos con css, tanto horizontal como verticalmente, o bidimensionalmente.
Espero que este artículo te haya sido de ayuda y que hayas aprendido algo nuevo sobre cómo centrar elementos html (divs ) con css.
Si te ha gustado, no dudes en compartirl. También puedes visitar nuestro blog para encontrar más artículos sobre css y otros temas relacionados con el desarrollo web. ¡Hasta la próxima!
Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.
Sobre mi