Cómo centrar una imagen en CSS

Si está creando su propio sitio web, definitivamente necesitará centrar una imagen.

Esta acción, que puede parecer sencilla en la imaginación, será mucho más compleja de lo que crees si no utilizas las técnicas adecuadas. De hecho, dependiendo de la estructura de su código HTML, no siempre será suficiente para usted con una propiedad CSS simple como text-align cuando desee centrar una imagen.

Por suerte para nosotros, hay varias formas en CSS de centrar una imagen horizontal o verticalmente en el centro de su página o contenedor.

Siga la siguiente guía para aprender a centrar perfectamente sus imágenes con unas pocas líneas en CSS.

Centrar una imagen horizontalmente en CSS

Centrar una imagen horizontalmente es bastante fácil de lograr y los métodos que se utilizarán para lograrlo son a menudo conocidos y rápidos de configurar. Sin embargo, aquí hay un resumen de las diferentes formas de centrar sus imágenes horizontalmente.

alineación de texto: centro

La propiedad CSS más rápida de usar y configurar es text-align con valor center. Sin embargo, esto requerirá que su etiqueta img ya sea contenido entre dos etiquetas <div></div> para aplicar la propiedad text-align: center; al elemento HTML div.

Si tu imagen está fuera de div o en un elemento HTML de otro tipo, no estará centrada.

Código HTML:


<div>
  <img src="https://www.iberbanda.es/css/center-image-css/my-image">
</div>

Código CSS:


div {
  text-align: center;
}

Margin: auto

Una alternativa a text-align: center; y que funcionará incluso si su imagen no está contenida en un elemento div es usar propiedades margin-left: auto; y margin-right: auto;.

Gracias a estas dos propiedades, que se pueden reducir a un simple margin: auto;, los márgenes se crearán automáticamente a la izquierda y derecha de su imagen que llenarán el “vacío” y así centrarán su imagen.

Sin embargo, existen dos requisitos previos para margin-left: auto; y margin-right: auto; trabajo, que son:

  1. Defina un ancho, distinto del 100%, a su imagen
  2. Convierte tu imagen en un elemento de tipo “bloque”

Para la primera condición, simplemente tendrá que usar la propiedad width en tu elemento img (o uno de sus selectores) para establecer un ancho para su imagen que no sea igual al ancho completo del contenedor (la pantalla o un contenedor HTML) en el que se encuentra.

Luego, para la segunda condición, un elemento HTML básico img es un “elemento en línea” o “elemento en línea” y necesita convertir su imagen en un elemento de nivel de bloque. Para hacer esto, simplemente aplique la propiedad CSS display: block; a tu imagen.

Una vez que se hayan cumplido estos dos requisitos previos, puede solicitar margin-left: auto; y margin-right: auto; o simplemente margin: auto; en su imagen para centrarla.

Código HTML:

<img src="https://www.iberbanda.es/css/center-image-css/my-image">

Código CSS:


img {
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Display: flex

El último método que le presentaremos aquí es el uso de display: flex; para centrar su imagen horizontalmente.

Como para text-align esto requiere que su imagen esté dentro de un contenedor, pero a diferencia de la técnica con text-align el recipiente puede ser de un tipo diferente al div.

Por lo tanto, puede centrar horizontalmente una imagen que esté en div, span, p, a o cualquier otro elemento HTML.

El contenedor debe tener las propiedades display: flex; y justify-content: center; que funcionan perfectamente juntos. La imagen debe tener un ancho definido por la propiedad width.

Código HTML:


<conteneur>
  <img src="https://www.iberbanda.es/css/center-image-css/my-image">
</conteneur>

Código CSS:


conteneur {
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
}

Centrar verticalmente una imagen en CSS

Un poco menos intuitivo, centrar un elemento o una imagen verticalmente puede parecer menos obvio que centrar horizontalmente. Afortunadamente, ¡hay formas de hacerlo perfectamente!

Display: flex (de nuevo)

La propiedad display: flex; nos permitirá una vez más centrar nuestra imagen pero ahora verticalmente.

Como recordatorio, su imagen debe estar contenida en otro elemento HTML (su contenedor) que debe tener la propiedad display: flex; y su imagen debe tener un ancho y un alto que sean menores que las dimensiones de su contenedor.

Si la imagen tiene dimensiones superiores a las de su contenedor, saldrá “visualmente” de este último. Entonces, a menos que lo desee, considere definir al menos una propiedad width en su imagen, pero esto sigue siendo opcional para centrar verticalmente la imagen.

Luego, el último paso para centrar verticalmente su imagen es aplicar la propiedad a su contenedor. align-items: center;.

También puede aplicar la propiedad justify-content: center; así centrará su imagen vertical y horizontalmente.

Código HTML:

<contenedor>
  <img src="https://www.iberbanda.es/css/center-image-css/my-image">
</contenedor>

Código CSS:

contenedor { display: flex; align-items: center; height: 300px; } img { width: 200px; }

Position: absolute y propiedad “transform”

Existe otro método, ciertamente un poco más complejo, para centrar su imagen verticalmente.

Esta forma de hacer requiere más comprensión técnica y práctica, pero nuevamente lo guiaremos a través del uso de esta técnica.

  1. Primero, necesita tener un contenedor con una posición “relativa”. Para hacer esto, use la propiedad position: relative; en su contenedor. En nuestro ejemplo, le daremos a nuestro contenedor una altura de 300px:
  2. Luego, su imagen debe estar dentro del contenedor creado previamente y tener una posición definida como “absoluta” con la propiedad CSS position: absolute;
  3. Después de eso, deberá mover la posición inicial de su imagen al 50% del borde superior de su contenedor. Esto moverá las coordenadas iniciales de su imagen al punto medio vertical de su contenedor.
  4. Finalmente, deberá mover el centro de la imagen al medio vertical del contenedor. Aplique una transformación en los ejes horizontal y vertical, X e Y de 0% y -50% respectivamente a su imagen.

Código HTML:

<contenedor>
  <img src="https://www.iberbanda.es/css/center-image-css/my-image">
</contenedor>

Código CSS:

contenedor { display: flex; align-items: center; height: 300px; } img { width: 200px; position: absolute; top: 50%; transform: translate(0%, -50%); } 

Si lo desea, también puede centrar horizontal y verticalmente con este método. En este caso, solo necesita cambiar la posición inicial de la imagen al 50% en el lado izquierdo de su contenedor y agregar una transformación de -50% en el eje horizontal (X) de la imagen.

Código CSS:

contenedor { display: flex; align-items: center; height: 300px; } img { width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

Conclusión

Las propiedades CSS le permiten centrar una imagen con bastante facilidad y sin demasiadas limitaciones en cualquier situación.

El método a utilizar dependerá generalmente de la estructura de su código HTML, otras propiedades CSS utilizadas en su sitio y posiblemente sus preferencias.