Comment faire un centre de l'image (verticalement et horizontalement) à l'intérieur d'un div plus grand

Question

J'ai un div 200 x 200 px. Je veux placer un 50 x 50 px juste au milieu de la div.

Comment ceci peut être fait?

Je suis capable de le centrer horizontalement en utilisant text-align: center pour la div. Mais l'alignement vertical est le problème.

Answer 1

Vous pourriez faire quelques tours de fantaisie ...

 img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
 

Answer 2

Personnellement, je le placerais comme image de fond dans le div, le CSS pour cela étant:

 #demo
{
background:url(bg_apple_little.gif) no-repeat center center;
height:200px;
width:200px;
}
 

(Suppose un div avec id = "demo" car vous spécifiez déjà la hauteur et la largeur ajoutant un arrière-plan ne devrait pas être un problème)

Laissez le navigateur prendre la pression ...

Answer 3

une autre façon est de créer un table avec valign , bien sûr. Cela fonctionnerait indépendamment de vous connaissant la hauteur de la div ou non.

 <div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>
 

mais vous devriez toujours vous contenter de css autant que possible.

Answer 4

Je définirais votre plus grand div avec position:relative; alors pour votre image faites ceci:

 img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}
 

Cela ne fonctionne que parce que vous connaissez les dimensions de l'image et la div contenant. Cela vous permettra également d'avoir d'autres éléments dans la div contenant ... où des solutions comme l'utilisation de line-height ne le seront pas.

EDIT : Note ... vos marges sont négatives la moitié de la taille de l'image.

Answer 5

Cela fonctionne correctement:

 display: block;
margin-left: auto;
margin-right: auto