Allinea l'immagine al centro e al centro all'interno del div

Ho seguito div

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

Come allineare l'immagine in modo da trovarsi al centro e al centro del 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>

Questo può essere fatto anche usando il layout Flexbox:

DIMENSIONE STATICA

.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>

DIMENSIONE DINAMICA

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>

Ho trovato l'esempio in questo articolo , che fa un ottimo lavoro spiegando come usare il layout.

Mi sembra che tu volessi anche che quell'immagine fosse centrata verticalmente all'interno del contenitore. (Non ho visto nessuna risposta che lo prevedesse)

Fiddle di lavoro:

1. Soluzione CSS pura
2. Non interrompere il flusso del documento (nessun galleggiante o posizionamento assoluto)
3. Compatibilità cross-browser (anche IE6)
4. Completamente reattivo.

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: questa soluzione è utile per allineare qualsiasi elemento all'interno di qualsiasi elemento. per IE7, quando applichi la .Centeredclasse su elementi a blocchi, dovrai usare un altro trucco per far inline-blockfunzionare. (questo perché IE6 / IE7 non gioca bene con il blocco inline sugli elementi del blocco)

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

Puoi farlo facilmente usando display: flex css property

#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;
}

Ho ancora avuto problemi con altre soluzioni presentate qui. Finalmente questo ha funzionato meglio per me:

<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%;
}

Puoi leggere di più su questo approccio in questa pagina .

Fondamentalmente, impostando il margine destro e sinistro su auto, l'allineamento centrale dell'immagine.

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

Questo sarebbe un approccio più semplice

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

La risposta di Daaawx funziona, ma penso che sarebbe più pulito se eliminassimo i CSS in linea.

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>

impostando l' img su display: inline-block pur avendo impostato il div superiore su text-align: center farà anche il lavoro

EDIT: per quelle persone che stanno giocando con display: inline-block >>> non dimenticare che ad esempio due div piace

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

davvero non hanno spazi tra di loro (come visto qui).

Semplicemente per evitare queste lacune (blocco intrinseco inerente) tra di loro. Questi divari possono essere visti tra ogni due parole che sto scrivendo proprio ora! :-) Quindi .. spero che questo aiuti alcuni di voi.

SEMPLICE. 2018. FlexBox. Per verificare il supporto del browser - Posso usare una

soluzione minima:

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

Per ottenere il supporto browser più ampio possibile:

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

Ho provato molti approcci ma solo questo funziona per più elementi inline all'interno di un div contenitore. Ecco il codice per allineare tutto in div al centro.

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>

Il codice di esempio è qui: https://jsfiddle.net/yogendrasinh/2vq0c68m/

File CSS

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

Prova questo codice minimo:

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

E CSS:

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

Bene, siamo nel 2016 ... perché non usare la flexbox? È anche reattivo. Godere.

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

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

molte risposte suggeriscono di usare, margin:0 automa questo funziona solo quando l'elemento che stai cercando di centrare non è mobile a sinistra o a destra, ovvero l' floatattributo css non è impostato. Per fare ciò, applica l' displayattributo table-celle quindi applica il margine sinistro e destro all'auto in modo che il tuo stile sia similestyle="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;
}

Per il centro in orizzontale Basta mettere

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

Un altro metodo:

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

Per il centro in verticale Basta inserire:

   #over img {

           vertical-align: middle;
        }

Questo ha funzionato per me:

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

questo ha fatto il trucco per me.

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

'Nota: in questo caso non è associata una classe CSS associata a' BrandImage '

CSS:

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

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

Questo ha funzionato per me quando devi centrare l'allineamento dell'immagine e il tuo div genitore sull'immagine ha delle copertine complete. cioè altezza: 100% e larghezza: 100%

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

Usa il posizionamento. Quanto segue ha funzionato per me ...

Con lo zoom al centro dell'immagine (l'immagine riempie il 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;
}

Senza zoom al centro dell'immagine (l'immagine non riempie il 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 risposta contrassegnata per questo non allinea verticalmente l'immagine. Una soluzione adatta per i browser moderni è la flexbox. Un contenitore flessibile può essere configurato per allineare i suoi elementi sia in orizzontale che in verticale.

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

Puoi dare un'occhiata a questa soluzione:

Centrare orizzontalmente e verticalmente un'immagine in una scatola

<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 modo semplice sarebbe creare stili separati sia per il div che per l'immagine e poi posizionarli in modo indipendente. Di 'se voglio impostare la mia posizione dell'immagine al 50%, allora avrei un codice simile al seguente ...

#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;
}

Modifica il valore dell'altezza in base alle tue esigenze.

Questo dovrebbe funzionare.

IMPORTANTE PER IL TEST: per eseguire lo snippet di codice fai clic sul pulsante sinistro Esegui snippet di codice , quindi fai clic sul collegamento a destra Pagina intera

#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>