Alinhar a imagem no centro e no meio dentro de div

Eu tenho o seguinte div

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

Como alinhar a imagem para ficar no meio e no 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>

Isso também pode ser feito usando o layout do Flexbox:

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

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

Encontrei o exemplo neste artigo , que faz um ótimo trabalho explicando como usar o layout.

Parece-me que você também queria que a imagem fosse verticalmente centralizada no contêiner. (Não vi nenhuma resposta que fornecesse isso)

Violino de trabalho:

1. Solução CSS pura
2. Não interromper o fluxo de documentos (sem flutuações ou posicionamento absoluto)
3. Compatibilidade entre navegadores (mesmo IE6)
4. Completamente responsivo.

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 solução é boa para alinhar qualquer elemento dentro de qualquer elemento. para o IE7, ao aplicar a .Centeredclasse em elementos de bloco, você precisará usar outro truque para obter o inline-blocktrabalho. (isso porque o IE6 / IE7 não funciona bem com o bloco embutido nos elementos do bloco)

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

Você pode fazer isso facilmente usando a propriedade 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;
}

Eu ainda tinha alguns problemas com outra solução apresentada aqui. Finalmente, isso funcionou melhor para mim:

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

Você pode ler mais sobre essa abordagem nesta página .

Basicamente, definir a margem direita e esquerda como automática fará com que a imagem fique alinhada ao centro.

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

Esta seria uma abordagem mais simples

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

A resposta de Daaawx funciona, mas acho que seria mais limpo se eliminássemos o CSS embutido.

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 o img para display: inline-block enquanto tiver definido a div superior como text-align: center também fará o trabalho

EDIT: para aquelas pessoas que estão brincando com display: inline-block >>> não esqueça que, por exemplo, duas divs como

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

realmente não há espaços entre eles (como visto aqui).

Apenas básico para evitar essas lacunas (inerentes ao bloco embutido) entre elas. Essas lacunas podem ser vistas entre cada duas palavras que estou escrevendo agora! :-) Então .. espero que isso ajude alguns de vocês.

SIMPLES. 2018. FlexBox. Para verificar o suporte ao navegador - Posso usar a

solução mínima:

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

Para obter o suporte mais amplo possível ao navegador:

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

Eu tentei muitas abordagens, mas somente essa funciona para vários elementos embutidos dentro de uma div de contêiner. Aqui está o código para alinhar tudo em div no meio.

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>

O código de amostra está aqui: https://jsfiddle.net/yogendrasinh/2vq0c68m/

Arquivo CSS

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

Experimente este código mínimo:

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

E CSS:

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

Bem, estamos em 2016 ... por que não usar o flexbox? Também é responsivo. Aproveitar.

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

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

Muitas respostas sugerem o uso, margin:0 automas isso funciona apenas quando o elemento que você está tentando centralizar não está flutuando à esquerda ou à direita, ou seja, o floatatributo css não está definido. Para fazer isso, aplique o displayatributo table-celle, em seguida, aplique a margem esquerda e direita ao automático, para que seu estilo pareçastyle="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 centralizar horizontalmente Basta colocar

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

Outro método:

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

Para o centro verticalmente Basta colocar:

   #over img {

           vertical-align: middle;
        }

Isso funcionou para mim:

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

isso fez o truque para mim.

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

'Observação: neste caso, não há uma classe css associada a' BrandImage '

CSS:

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

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

Isso funcionou para mim quando você precisa centralizar a imagem de alinhamento e sua div principal com a imagem cobre a tela inteira. ou seja, altura: 100% e largura: 100%

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

Use posicionamento. O seguinte funcionou para mim ...

Com o zoom no centro da imagem (a imagem preenche a 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;
}

Sem zoom para o centro da imagem (a imagem não preenche a 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;
    }

A resposta marcada para isso não alinhará verticalmente a imagem. Uma solução adequada para navegadores modernos é o flexbox. Um contêiner flexível pode ser configurado para alinhar seus itens horizontalmente e verticalmente.

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

Você pode dar uma olhada nesta solução:

Centralizando horizontal e verticalmente uma imagem em uma caixa

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

Uma maneira simples seria criar estilos separados para a div e a imagem e depois posicioná-los independentemente. Digamos que se eu quiser definir a posição da minha imagem para 50%, então eu teria um código parecido com o seguinte ....

#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 o valor da altura para sua necessidade.

Isso deve funcionar.

IMPORTANTE PARA O TESTE: Para executar o snippet de código, clique no botão esquerdo EXECUTE o snippet de código e , em seguida, no link direito Página inteira

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