Artículo original escrito por Cem Eygi
Artículo original How to Center an Image Vertically and Horizontally with CSS
Traducido y adaptado por Gibrán Pelayo
Muchos desarrolladores luchan mientras trabajan con imágenes. El manejo del diseño responsivo y la alineación es particularmente difícil, especialmente al centrar una imagen en el medio de una página.
Así que en esta publicación, estaré mostrando algunas de las formas más comunes de centrar una imagen tanto vertical como horizontalmente empleando diferentes propiedades de CSS.
Ya he repasado las propiedades position y display de CSS en mi publicación anterior. Si no estás familiarizado con esas propiedades, te recomiendo que revises esas publicaciones antes de leer este artículo.
Centrar una imagen horizontalmente
Empecemos con centrar una imagen de manera horizontal utilizando 3 diferentes propiedades de CSS.
Text-align
La primera forma es con la propiedad text-align . Sin embargo, este método solo funciona si la imagen está dentro de un contenedor a nivel de bloque como <div>:
<style>
div {
text-align: center;
}
</style>
<div>
<img src="tu-imagen.jpg">
</div>Margin: Auto
Otra forma de centrar una imagen es usando la propiedad margin: auto (para los márgenes izquierdo y derecho).
No obstante, usar únicamente margin: auto no funcionará para las imágenes. Si necesitas usar margin: auto, hay dos propiedades adicionales que también debes usar.
La propiedad margin-auto no tiene efecto alguno en elementos a nivel de línea. Partiendo de que la etiqueta <img> es un elemento en línea, necesitamos convertirla primero a un elemento a nivel de bloque:
img {
margin: auto;
display: block;
}Segundo, también necesitamos definir una anchura. Para que los márgenes izquierdo y derecho puedan tomar el resto del espacio vacío y se alineen automáticamente, lo que hace la magia (a menos de que le demos una anchura de 100%):
img {
width: 60%;
margin: auto;
display: block;
}Display: flex
La tercera forma de centrar una imagen horizontalmente es usando display: flex. Justo como usamos la propiedad text-align para un contenedor, usamos display: flex también para un contenedor.
Sin embargo, usar únicamente display: flex no es suficiente. El contenedor debe tener también una propiedad adicional llamada justify-content:
div {
display: flex;
justify-content: center;
}
img {
width: 60%;
}La propiedad justify-content trabaja en conjunto con display: flex, que la podemos usar para centrar una imagen horizontalmente.
Finalmente, la anchura de la imagen debe ser más pequeña que la anchura del contenedor, de lo contrario, toma el 100% del espacio y no podremos centrarla.
Importante: La propiedad display: flex no está soportada en las versiones antiguas de los navegadores.
Centrar una imagen verticalmente
Display: flex
Para alineamiento vertical, el usar display: flex es otra vez realmente útil.
Considera un caso donde nuestro contenedor tiene una altura de 800px, pero la altura de la imagen es de tan solo 500px:
div {
display: flex;
justify-content: center;
height: 800px;
}
img {
width: 60%;
height: 500px;
}Ahora, en este caso, agregar una simple línea de código al contenedor, align-items: center, hace la magia:
div {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}La propiedad align-items puede posicionar verticalmente los elementos si se usa en conjunto con display: flex.
Position: propiedades absolute y transform
Otro método para la alineación vertical es usar juntas las propiedades position y transform . Esto es algo un poco complicado, así que vamos a hacerlo paso a paso.
Paso 1: definir posición absoluta
Primero, necesitamos cambiar el comportamiento de posicionamiento de la imagen de static a absolute:
div {
height: 800px;
position: relative;
background: red;
}
img {
width: 80%;
position: absolute;
}Además, debe estar dentro de un contenedor posicionado relativamente, así que agregamos position: relative a su contenedor div.
Paso 2: definir las propiedades top y left
Segundo, definimos las propiedades top y left para la imagen, y las establecemos a 50%. Esto moverá el punto inicial (arriba-izquierda) de la imagen al centro del contenedor:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}Paso 3: definir la propiedad transform
Pero el paso dos ha movido la imagen parcialmente fuera de su contenedor. Así que necesitamos traerla de regreso adentro.
Definir una propiedad transform y agregar -50% a sus ejes X e Y hace la magia:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Hay otras maneras de centrar objetos horizontal y verticalmente, pero he explicado las más comunes. Espero que esta publicación te haya ayudado a entender cómo alinear imágenes en el centro de la página.
Si quieres aprender más acerca de Desarrollo Web, date una vuelta a mi canal de Youtube.
¡Gracias por leerme!