Aligner l'image au centre et au milieu dans div

J'ai suivant div

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

Comment aligner l'image pour se situer au milieu et au centre de div?

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

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

Cela peut également être fait en utilisant la disposition 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 cet article , qui explique très bien comment utiliser la mise en page.

Il me semble que vous vouliez également que cette image soit centrée verticalement dans le conteneur. (Je n'ai vu aucune réponse à condition que)

Violon de travail:

1. Solution CSS pure
2. Ne pas interrompre le flux de documents (pas de flottants ni de positionnement absolu)
3. Compatibilité entre navigateurs (même IE6)
4. Complètement 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;
}

Remarque: cette solution est bonne pour aligner n'importe quel élément dans n'importe quel élément. pour IE7, lors de l'application de la .Centeredclasse sur des éléments de bloc, vous devrez utiliser une autre astuce pour faire inline-blockfonctionner. (parce que IE6 / IE7 ne fonctionnent pas bien avec les éléments de bloc en ligne sur bloc)

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

Vous pouvez le faire facilement en utilisant la propriété display: flex css

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

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

J'avais encore quelques problèmes avec une autre solution présentée ici. Enfin, cela a fonctionné le mieux pour moi:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

Vous pouvez en savoir plus sur cette approche sur cette page .

Fondamentalement, le réglage de la marge droite et gauche sur auto entraînera l'alignement du centre de l'image.

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

Ce serait une approche plus simple

#over > img{
    display: block;
    margin:0 auto; 
}

La réponse de Daaawx fonctionne, mais je pense que ce serait plus propre si nous éliminions le CSS en ligne.

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

définition de l' img pour afficher: inline-block tout en ayant défini la division supérieure sur text-align: center fera également le travail

EDIT: à ceux qui jouent avec display: inline-block >>> n'oubliez pas que par exemple deux divs comme

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

n'ont vraiment aucun espace entre eux (comme on le voit ici).

Juste basique pour éviter ces écarts (inline block inhérents) entre eux. Ces écarts sont visibles entre tous les deux mots que j'écris en ce moment! :-) Alors .. j'espère que cela aide certains d'entre vous.

FACILE. 2018. FlexBox. Pour vérifier la prise en charge du navigateur - Puis-je utiliser une

solution minimale:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

Pour obtenir la prise en charge de navigateur la plus large possible:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

J'ai essayé de nombreuses approches, mais seule celle-ci fonctionne pour plusieurs éléments en ligne dans une div de conteneur. Voici le code pour tout aligner en div au milieu.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Un exemple de code est ici: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Fichier CSS

.over {
    display : block;
    margin : 0px auto;

Essayez ce code minimal:

<div class="outer">
    <img src="image.png"/>
</div>

Et CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

Eh bien, nous sommes en 2016 ... pourquoi ne pas utiliser la flexbox? Il est également réactif. Prendre plaisir.

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

de nombreuses réponses suggèrent d'utiliser, margin:0 automais cela ne fonctionne que lorsque l'élément que vous essayez de centrer ne flotte pas à gauche ou à droite, c'est-à-dire que l' floatattribut css n'est pas défini. Pour ce faire, appliquez l' displayattribut à table-cellpuis appliquez la marge de gauche et de droite à auto pour que votre style ressemble àstyle="display:table-cell;margin:0 auto;"

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

Pour le centre horizontalement

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Une autre méthode:

#over img {
    display: inline-block;
    text-align: center;
}

Pour centrer verticalement Il suffit de mettre:

   #over img {

           vertical-align: middle;
        }

Cela a fonctionné pour moi:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

cela a fait l'affaire pour moi.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Remarque: aucune classe CSS n'est associée à' BrandImage 'dans ce cas

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

Cela a fonctionné pour moi lorsque vous devez aligner l'image au centre et que votre div parent à l'image couvre tout l'écran. soit hauteur: 100% et largeur: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

Utilisez le positionnement. Ce qui suit a fonctionné pour moi ...

Avec zoom au centre de l'image (l'image remplit la div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Sans zoom au centre de l'image (l'image ne remplit pas la div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

La réponse marquée pour cela n'alignera pas verticalement l'image. Flexbox est une solution appropriée pour les navigateurs modernes. Un conteneur flexible peut être configuré pour aligner ses éléments à la fois horizontalement et verticalement.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

Vous pouvez jeter un œil à cette solution:

Centrage horizontal et vertical d'une image dans une boîte

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Un moyen simple serait de créer des styles distincts pour la div et l'image, puis de les positionner indépendamment. Disons que si je veux définir ma position d'image à 50%, alors j'aurais du code qui ressemble à ce qui suit ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Modifiez la valeur de la hauteur selon vos besoins.

Cela devrait fonctionner.

IMPORTANT TEST POUR: Pour exécuter du code extrait cliquez sur le bouton gauche extrait de code RUN , puis lien à droite pleine page

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>