Centrar la imagen en div horizontalmente [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Tengo un img en un div (class="top_image") y quiero que esta imagen esté exactamente en el medio del div pero nada de lo que intento funciona...

Gracias por cualquier ayuda!

 179
csshtml
Author: Nima Derakhshanjan, 2012-04-02
Source

7 answers

Cada solución publicada aquí asume que usted conoce las dimensiones de su img, lo cual no es un escenario común. Además, plantar las dimensiones en la solución es doloroso.

Simplemente establece: 

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

O

/* for the img inside your div */
display: block;
margin: 0 auto;

Eso es todo.

Tenga en cuenta que también tendrá que establecer un min-width inicial para su div exterior.

 462
Author: Dyin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-01 12:52:06

Text-align: center solo funcionará para el centrado horizontal. Para que esté en el centro completo, vertical y horizontal puede hacer lo siguiente :

div
{
    position: relative;
}
div img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image's width];
    margin-top: [-50% of your image's height];
}
 25
Author: Maxime Fabre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-02 17:08:51

Una solución muy simple y elegante para esto es proporcionada por W3C. Simplemente use la declaración automática margin: 0 de la siguiente manera:

.top_image img { margin:0 auto; }

Más información y ejemplos del W3C.

 9
Author: Phil Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-09 10:13:37 
<div class="outer">
    <div class="inner">
        <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
    </div>
</div>

CSS 

img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.outer
{
    border: 1px solid #888;
    width: 100px;
    height: 100px;
}

.inner
{
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}
 6
Author: Ads,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-13 18:15:34

Creo que es mejor alinear el centro de texto para div y dejar que la imagen se encargue de la altura. Simplemente especifique un relleno superior e inferior para que div tenga espacio entre la imagen y el div. Mira este ejemplo: http://jsfiddle.net/Tv9mG/

 5
Author: Jay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-02 17:26:13

Espero que esto sea útil: 

.top_image img{
display: block;
margin: 0 auto;
}
 3
Author: Arasu Pandiyan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-23 08:28:22

Esto me llevó demasiado tiempo averiguarlo. No puedo creer que nadie haya mencionado las etiquetas del centro.

Ex: 

<center><img src = "yourimage.png"/></center>

Y si desea cambiar el tamaño de la imagen a un porcentaje:

<center><img src = "yourimage.png" width = "75%"/></center>

GG America

 -3
Author: DisgruntledHuman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-01 23:18:02