Aligner l'image au centre et au milieu de la division

Question

J'ai la division suivante

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

Comment aligner l'image de manière à ce qu'elle soit située au milieu et au centre de la division ?

Answer 1

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

JSFiddle

Answer 2

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

Answer 3

Cela peut également être fait en utilisant la mise en page Flexbox :

TAILLE STATIQUE

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

TAILLE DYNAMIQUE

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

J'ai trouvé l'exemple dans ce artículo qui explique très bien le mode d'emploi de la mise en page.

Answer 4

Il me semble que vous vouliez également que l'image soit centrée verticalement dans le conteneur. (Je n'ai pas vu de réponse qui fournisse cela)

Violon de travail :

1. Solution purement CSS
2. Ne pas rompre le flux du document (pas de flottants ni de positionnement absolu)
3. Compatibilité avec tous les navigateurs (même IE6)
4. Entièrement réactif.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Nota: cette solution est bonne pour aligner tout élément dans tout élément. Pour IE7, lorsque l'on applique le .Centered sur les éléments de bloc, vous devrez utiliser une autre astuce pour obtenir la classe inline-block fonctionnement. (cela parce que IE6/IE7 ne joue pas bien avec inline-block sur les éléments de bloc)

Answer 5

img.centered {
   display: block;
   margin: auto auto;
}