Muchos de nosotros nos hemos tenido que “romper la cabeza” para poder centrar una imagen en un contenedor, bien siendo de forma horizontal o de forma vertical, es una práctica que, sobretodo a los iniciados en CSS, les cuesta bastante por las variantes que existen. Y es que se han de tener en cuenta las propiedades de la imagen antes de escoger el método a utilizar.

Los métodos que ahora expondré son sólo algunos de los que podemos utilizar (pronto ampliaré otras formas de alinear una imagen en CSS mediante backgrounds). Aunque yo prefiero éstas, ya que son más efectivas con respecto al posicionamiento SEO y más precisas para la semántica de la web.

Para centrar una imagen dentro de un contenedor div no hay más que utilizar unas pocas propiedades CSS que nos solucionarán ese problema. Dependiendo del caso deberás utilizar un tipo de centrado u otro tal y como explicaré ahora:

Centrar horizontalmente una imagen con ancho fijo

<div class="contenedor1">
  <img class="centrado1" alt="" src="http://ismaelgsan.com/wp-content/uploads/2012/11/Megan-Fox-01-e1354975128721.jpg" />
</div>
.centrado1 {
  width: 100px;
  margin: 0 auto;
  display: block;
}
.contenedor1 {
  background-color: #aaa;
  width: 100%;
  height: 200px;
}

Centrar horizontalmente una imagen con ancho variable

<div class="contenedor3">
  <img class="centrado3" alt="" src="http://ismaelgsan.com/wp-content/uploads/2012/11/Megan-Fox-01-e1354975128721.jpg" />
</div>
.centrado2 {
  width: 50%;
  display: table-cell;
}
.contenedor2 {
  background-color: #aaa;
  width: 100%;
  height: 200px;
  text-align: center;
  display: table;
}

Centrar verticalmente una imagen con ancho fijo (válido, también, para alinear verticalmente intercambiando width<>height y margin-left<>margin-top)

<div class="contenedor3">
  <img class="centrado3" alt="" src="http://ismaelgsan.com/wp-content/uploads/2012/11/Megan-Fox-01-e1354975128721.jpg" />
</div>
.centrado3 {
  height: 100px;
  top: 50%;
  margin-top: -50px; /* este valor corresponde a la mitad de su height */
  position: absolute;
}
.contenedor3 {
  background-color: #aaa;
  width: 100%;
  height: 200px;
  position: relative;
}

Centrar verticalmente una imagen con ancho variable

<div class="contenedor4">
  <div class="cont-image4">
    <img class="centrado4" alt="" src="http://ismaelgsan.com/wp-content/uploads/2012/11/Megan-Fox-01-e1354975128721.jpg" />
  </div>
</div>
.centrado4 {
  width: 10%;
}
.cont-image4 {
  vertical-align: middle;
  display: table-cell;
}
.contenedor4 {
  background-color: #aaa;
  width: 100%;
  height: 200px;
  display: table;
}

Centrar todo

<div class="contenedor5">
  <div class="cont-image5">
    <img class="centrado5" alt="" src="http://ismaelgsan.com/wp-content/uploads/2012/11/Megan-Fox-01-e1354975128721.jpg" />
  </div>
</div>
.centrado5 {
  max-width: 10%;
  max-height: 10%
}
.cont-image5 {
  vertical-align: middle;
  display: table-cell;
  table-layout: fixed;
}
.contenedor5 {
  background-color: #aaa;
  width: 100%;
  height: 200px;
  display: table;
  text-align: center;
}

Estos son las formas con las que yo me quedaría, habiendo algunas más que, como dije al comienzo del artículo, explicaré más adelante.

¿Qué os parece? ¿Escogeríais alguna distinta?


Ismael Gutiérrez

Ingeniero Informático. Explotando mis capacidades personales y profesionales. Comprometido con la calidad. #RegulaciónYa #IngenieríaInformática

Deja un comentario