J'ai le code suivant qui configure un conteneur dont la hauteur change avec la largeur lorsque le navigateur est redimensionné (pour maintenir un rapport hauteur / largeur carré).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Comment puis-je aligner verticalement l'IMG à l'intérieur du conteneur? Toutes mes images ont des hauteurs variables et le conteneur ne peut pas avoir une hauteur / hauteur de ligne fixe car il est réactif ... S'il vous plaît aider!

Voici une technique pour aligner des éléments en ligne à l'intérieur d'un parent , horizontalement et verticalement en même temps:

Alignement vertical

1) Dans cette approche, nous créons un inline-block(pseudo-) élément comme premier (ou dernier) enfant du parent , et définissons sa heightpropriété sur 100%pour prendre toute la hauteur de son parent .

2) De plus, l'ajout vertical-align: middlegarde les éléments en ligne (-block) au milieu de l'interligne. Donc, nous ajoutons cette déclaration CSS au premier enfant et à notre élément (l' image ) à la fois.

3) Enfin, afin de supprimer le caractère d'espace blanc entre les éléments en ligne (-bloc) , nous pourrions définir la taille de la police du parent à zéro par font-size: 0;.

Remarque: j'ai utilisé la technique de remplacement d'image de Nicolas Gallagher dans ce qui suit.

Quels sont les bénéfices?

• Le conteneur ( parent ) peut avoir des dimensions dynamiques.

• Il n'est pas nécessaire de spécifier explicitement les dimensions de l'élément d'image.

• Nous pouvons facilement utiliser cette approche pour aligner un <div>élément verticalement également; qui peut avoir un contenu dynamique (hauteur et / ou largeur). Mais notez que vous devez redéfinir la font-sizepropriété de divpour afficher le texte intérieur. Démo en ligne .

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

Le résultat

Conteneur réactif

Cette section ne répondra pas à la question car l'OP sait déjà comment créer un conteneur réactif. Cependant, je vais vous expliquer comment cela fonctionne.

Afin de faire changer la hauteur d'un élément de conteneur avec sa largeur (en respectant les proportions), nous pourrions utiliser une valeur de pourcentage pour la paddingpropriété haut / bas .

Une valeur de pourcentage sur le remplissage ou les marges haut / bas est relative à la largeur du bloc conteneur.

Par exemple:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Voici la démo en ligne . Commentez les lignes du bas et redimensionnez le panneau pour voir l'effet.

De plus, nous pourrions appliquer la paddingpropriété à un mannequin enfant ou :before/ :afterpseudo-élément pour obtenir le même résultat. Mais notez que dans ce cas, la valeur en pourcentage sur paddingest relative à la largeur de .responsive-containerlui - même.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Démo n ° 1 .
Démo # 2 (Utilisation d'un :afterpseudo-élément)

Ajout du contenu

L'utilisation de la padding-toppropriété crée un espace énorme en haut ou en bas du contenu, à l'intérieur du conteneur .

Pour résoudre ce problème, nous avons envelopper le contenu par un élément d'emballage, retirer cet élément du document flux normal en utilisant le positionnement absolu , et enfin développer l'emballage (bu en utilisant top, right, bottomet leftpropriétés) pour remplir tout l'espace de son parent, le conteneur .

Et c'est parti:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Voici la démo en ligne .

Se rassembler tous

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Voici la DEMO DE TRAVAIL .

Évidemment, vous pouvez éviter d'utiliser un ::beforepseudo-élément pour la compatibilité du navigateur et créer un élément en tant que premier enfant de .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

DÉMO MISE À JOUR .

Utilisation des max-*propriétés

Afin de garder l'image à l'intérieur de la boîte dans une largeur inférieure, vous pouvez définir max-heightet max-widthpropriété sur l'image:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Voici la DÉMO MISE À JOUR .

Avec flexbox, c'est facile:

VIOLON

Ajoutez simplement ce qui suit au conteneur d'image:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Utilisez ce css, car vous en avez déjà le balisage:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Voici un JsBin fonctionnel: http://jsbin.com/ihilUnI/1/edit

Cette solution ne fonctionne que pour les images carrées (car une valeur en pourcentage de la marge supérieure dépend de la largeur du conteneur, pas de la hauteur). Pour les images de taille aléatoire, vous pouvez effectuer les opérations suivantes:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Solution de travail JsBin: http://jsbin.com/ihilUnI/2/edit

Vous pouvez centrer une image, à la fois horizontalement et verticalement, en utilisant margin: autoun positionnement absolu. Aussi:

1. Il est possible d'abandonner le balisage supplémentaire en utilisant des pseudo éléments.
2. Il est possible d'afficher la partie centrale des images GRANDES en utilisant des valeurs négatives à gauche, en haut, à droite et en bas.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}

<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>

Essaye celui-là

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

Voici une technique qui vous permet de centrer TOUT contenu à la fois verticalement et horizontalement!

Fondamentalement, vous avez juste besoin de deux conteneurs et assurez-vous que vos éléments répondent aux critères suivants.

Le conteneur extérieur:

• avoir dû display: table;

Le conteneur intérieur:

• avoir dû display: table-cell;
• avoir dû vertical-align: middle;
• avoir dû text-align: center;

La boîte de contenu:

• avoir dû display: inline-block;

Si vous utilisez cette technique, ajoutez simplement votre image (avec tout autre contenu que vous souhaitez accompagner) dans la zone de contenu.

Démo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Voir aussi ce violon !

Je suis tombé sur ce fil à la recherche d'une solution qui:

• utilise 100% de la largeur de l'image donnée
• conserve le rapport hauteur / largeur de l'image
• garde l'image alignée verticalement au milieu
• fonctionne dans les navigateurs qui ne prennent pas entièrement en charge flex

En testant certaines des solutions publiées ci-dessus, je n'en ai pas trouvé une répondant à tous ces critères, j'ai donc rassemblé cette solution simple qui pourrait être utile pour d'autres personnes qui doivent faire de même:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Exemple de travail sur JSFiddle

Essayer

HTML

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

Code HTML

<div class="image-container"> <img src=""/> </div>

code css

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

Créez un autre div et ajoutez à la fois 'dummy' et 'img-container' à l'intérieur du div

Faites du HTML et du CSS comme suit

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}

<div class="responsive-container">
    <div class="inner-container">
		<div class="dummy">Sample</div>
		<div class="img-container">
			Image tag
		</div>
	</div>	
</div>

Au lieu de 100% pour le `` conteneur réactif '', vous pouvez donner la hauteur que vous voulez.,