Center image vertically within a div

If you do not need support for Internet Explorer 8 or the project is more flexible, you can also use the following code:

.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* Adicionar os prefixos dos navegadores */
}

Source - link

It's also worth remembering that using display:table does not work with float .

Another solution, for those who need support under Internet Explorer 8:

.vertical-align {
    display: block;
}

.vertical-align > div {
    display: block;
    position: relative;
    margin-top: inherit;
    clear: ~'expression(style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"), style.clear = "none", 0)';
}

Another solution if Internet Explorer 6 support is required:

.vertical-align {
    position: relative;
}

.vertical-align > div {
    position: absolute;
    top: 50%;
}

.vertical-align > div > div {
    position: relative;
    top: -50%;
}

Source - link

This should solve your problem:

div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Although this question has been asked for some time; I'll be showing an easy way to center images using flex-box to help those who need them.

Enter a class in div and place the img tag inside div , as shown below:

<div class="centralizarImagem">
    <img src="algumaImagem.jpg" alt="Alguma Imagem" width="400" height="190" />
</div>

In the CSS insert:

.centralizarImagem { 
    display:         flex;
    display: -webkit-flex; /* Garante compatibilidade com navegador Safari. */

    justify-content: center;
    align-items: center;
}

If you want to study more about flex-box , at CSS-Tricks A more complete guide is available.

What's missing is display:table; in the div container that has display: table-cell; putting this will work perfectly. see example: CSS:

#container {
 width: 200px; 
 height: 150px; 
 border: 1px solid #c30;
 background: #ffe;
 position: relative;
 display:table; 
 }
#container p {
 *position: absolute; 
 top: 50%; 
 display: table-cell; 
 vertical-align: middle;
 }
#container span {
 display:block; 
 *position: relative; 
 top: -50%;
 }

HTML:

<div id="container">
    <p><span>Texto no meio da DIV</span></p>
</div>

The simplest form I know and I'm sure it does not fail is this

#container {
  position: relative;
  width: 200px;
  height: 200px;
}
#container img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

This is a cross-browser way of doing the alignment regardless of whether the image is landscape or portrait.

To center an image within a div , you first need to put div with position: relative and the image with position: absolute .

After this, transform: translate(-50%,-50%) , along with top 50% and left 50% , as can be seen in the example below:

div{  
    position: relative;  
    width: 170px; // Largura da DIV  
    height: 155px; // Altura da DIV  
    overflow: hidden; // Para que as partes da imagem maior que as widht e height não apareçam  
}

img{  
    position: absolute;  
    overflow: hidden;  
    top: 50%;  
    left: 50%;  
    -webkit-transform: translate(-50%,-50%);  
    -moz-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);  
    -o-transform: translate(-50%,-50%);  
    transform: translate(-50%,-50%);  
}

Try with line-height: .

Example:

line-height: 40px;

Here's a way:

EXAMPLE

HTML:

<div>
  Este div está no centro!
</div>

CSS:

div {
  width: 200px;
  height: 200px;
  margin-left: -100px; /* metade da largura */
  margin-top: -100px; /* metade da altura */
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid red;
}

Source: link

If your div and your image have a defined heigth, you can do this:

.img { 
 height: 200px; /* Altura da imagem */
 position:relative;
 margin-top: 50%;
 top: -100px; /* Negatico da metade da altura da imagem */
}

Thanks to everyone for the help.

I did it this way.

.produtosListagemImagemFix {
display: table-cell;
height: 286px;
vertical-align: middle;
width: 253px;}

I believe that with display:grid is the easiest way! I left the comments in CSS

OBS: It works from IE10 forward! link

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.grid {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center; /* centraliza na vertical e horizontal */
    /* align-items: center; se quiser centralizar apenas na vertical */
}
.centro {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

<div class="grid">
    <div class="centro">margin: auto;</div>
</div>