Vamos a centrarnos…
Por defecto en cuanto añadimos un display a una imagen dentro de un contenedor (p, div, etc.) esta se nos situa en la esquina superior izquierda por defecto. Pero en caso de que queramos que el contenedor sea más pequeño que la imagen que va a contener y que a su vez la imagen quede centrada dentro en vez de adaptarse al tamaño del contenedor (que sería lo habitual), ¿cómo lo hacemos? Pues es bastante sencillo, sobre todo si buscamos controlar una imagen por su altura y no por su anchura.
Por ejemplo en está misma página puedes web un ejemplo en la home, los 4 bloques superiores están con un 25% de ancho y un 60% de alto por defecto, sin embargo las imágenes que se muestras tienen un aspecto cuadrado y son más grandes que su contenedor y están centradas dentro de este, así independientemente de la resolución el foco de cada imagen siempre será el centro de la misma y al estar repartido el espacio total en 4 bloques, debo supervisar más la altura que la anchura para que la información se vea correctamente y queden visualmente bien.
Pues conseguir esto es bastante fácil:
/* Por defecto si queremos trabajar con las alturas todos los contenedores, incluidos las etiquetas html y body deben tener ordener de height, en mi caso le digo que html/body ocupen todo el documento sin ningún tipo de margen */
html,body{
width: 100%; }
height: 100%;
margin: 0;
padding: 0
/* Al contenedor general ocupa el 25% del ancho y el 60% del total de pantalla, con posición relativa */
.contenedor{ display: block; }
width: 25%;
height: 60%;
position: relative;
/* El conteniedor interior ocupa todo el ancho y alto y tiene posición absoluta, por defecto con top y left 0 */
.contenedor > .bloqueImg{
display: block; }
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
/* Y en el IMG obramos la magia, controlamos el 100% de altura y la anchura la dejamos auto, lo posicionamos relativamente y… */
.contenedor > .bloqueImg> img{
display: block; /* …le decimos que por defecto se posicione a un 50% a la izquierda pero también lo trasladamos horizontalmente un -50% y voilà, conseguimos que la imagen se mantenga centrada ya que tiene en cuenta el tamaño de la imagen, que es más grande que el contenedor, por lo que esta se centra */
width: auto;
height: 100%;
margin: auto;
position: relative;
left: 50%; }
transform: translatex(-50%)
Ya véis que forzar un centrado horizontal de una imagen (aunque también es extrapolable a divs por ejemplo) es bastante sencillo, la clave es jugar con posiciones, left y sobre todo el transform: translatex.
