Alinee la imagen en el centro y en el medio dentro de div

Tengo siguiente div

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

¿Cómo alinear la imagen para ubicarla en el centro y centro 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>

Esto también se puede hacer usando el diseño de Flexbox:

TAMAÑO ESTÁTICO

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

TAMAÑO DINÁMICO

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>

Encontré el ejemplo en este artículo , que hace un gran trabajo explicando cómo usar el diseño.

Me parece que también querías que esa imagen estuviera centrada verticalmente dentro del contenedor. (No vi ninguna respuesta que lo proporcionara)

Violín de trabajo:

1. Solución CSS pura
2. No interrumpir el flujo de documentos (sin flotantes ni posicionamiento absoluto)
3. Compatibilidad cruzada con el navegador (incluso IE6)
4. Completamente receptivo

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: esta solución es buena para alinear cualquier elemento dentro de cualquier elemento. para IE7, cuando aplique la .Centeredclase en elementos de bloque, deberá usar otro truco para que inline-blockfuncione. (eso porque IE6 / IE7 no funciona bien con bloque en línea en elementos de bloque)

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

Puede hacerlo fácilmente usando display: propiedad 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;
}

Todavía tenía algunos problemas con otra solución presentada aquí. Finalmente esto funcionó mejor para mí:

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

Puede leer más sobre ese enfoque en esta página .

Básicamente, establecer el margen derecho e izquierdo en automático hará que la imagen se alinee en el centro.

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

Este sería un enfoque más simple

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

La respuesta de Daaawx funciona, pero creo que sería más limpio si eliminamos el CSS en línea.

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>

configurando el img para mostrar: inline-block mientras configura el div superior para text-align: center también hará el trabajo

EDITAR: para aquellas personas que están jugando con display: inline-block >>> no olviden que, por ejemplo, dos divs como

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

Realmente no tienen espacios entre ellos (como se ve aquí).

Simplemente básico para evitar estas brechas (inherentes al bloque en línea) entre ellos. ¡Estas brechas se pueden ver entre cada dos palabras que estoy escribiendo en este momento! :-) Entonces ... espero que esto ayude a algunos de ustedes.

SENCILLO. 2018. FlexBox. Para verificar la compatibilidad del navegador: ¿puedo usar una

solución mínima?

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

Para obtener el soporte de navegador más amplio posible:

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

He intentado muchos enfoques, pero solo este funciona para múltiples elementos en línea dentro de un contenedor div. Aquí hay un código para alinear todo en div en el medio.

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>

El código de muestra está aquí: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Archivo CSS

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

Prueba este código mínimo:

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

Y CSS:

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

Bueno, estamos en 2016 ... ¿por qué no usar flexbox? También es receptivo. Disfrutar.

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

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

muchas respuestas sugieren usar, margin:0 autopero esto funciona solo cuando el elemento que intenta centrar no está flotando a la izquierda o la derecha, es decir, el floatatributo css no está configurado. Para hacer esto, aplique el displayatributo table-celly luego aplique el margen de izquierda y derecha a automático para que su estilo se vea comostyle="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;
}

Para el centro horizontalmente Solo pon

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

Otro método:

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

Para el centro verticalmente Solo ponga:

   #over img {

           vertical-align: middle;
        }

Esto funcionó para mí:

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

Esto hizo el truco para mí.

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

'Nota: en este caso, no tengo una clase css asociada a' BrandImage '

CSS:

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

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

Esto funcionó para mí cuando tienes que centrar la imagen de alineación y tu div padre a la imagen cubre toda la pantalla. es decir, altura: 100% y ancho: 100%

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

Usar posicionamiento. Lo siguiente funcionó para mí ...

Con zoom al centro de la imagen (la imagen llena el 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;
}

Sin acercar al centro de la imagen (la imagen no llena el 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 respuesta marcada para esto no alineará verticalmente la imagen. Una solución adecuada para los navegadores modernos es flexbox. Se puede configurar un contenedor flexible para alinear sus elementos tanto horizontal como verticalmente.

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

Puedes echar un vistazo a esta solución:

Centrar horizontal y verticalmente una imagen en un cuadro

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

Una manera simple sería crear estilos separados tanto para el div como para la imagen y luego posicionarlos de forma independiente. Digamos que si quiero establecer la posición de mi imagen al 50%, tendría un código similar al siguiente ...

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

Modifique el valor de altura para su necesidad.

Esto debería funcionar.

IMPORTANTE PARA LA PRUEBA: para ejecutar el fragmento de código, haga clic en el botón izquierdo EJECUTAR fragmento de código , luego enlace derecho Página completa

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