Center image vertically within a div

Question

I need to center images inside a div. I can do it horizontally with text-align:center;, but I want to centralize vertically. I tried to vertical-align: middle; and display: table-cell; and it didn’t work.

Is there any other solution? If possible, only using CSS.

Answer 1

That should solve your problem:

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

Answer 2

If Internet Explorer 8 support is not required 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 - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

It is also worth remembering that the use of display:table does not work with float.

Another solution, for those who need to 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 - http://css-tricks.com/vertically-center-multi-lined-text/

Answer 3

Although it has been some time since this question was asked; I will be showing an easy way to center images using flex-box, to help those in need.

Enter a class in div and tag img within the 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, on the website CSS-Tricks a more complete guide is available.

Answer 4

What’s missing is the display:table; in the container of div who is with display: table-cell; Putting this will work perfectly. take the 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>

Answer 5

The simplest way I know and I’m sure it doesn’t 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 making the independent alignment of the image to be paisegem or portrait.

Answer 6

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

After that,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%);  
}

Answer 7

Try with line-height:.

Example:

line-height: 40px;

Answer 8

Here 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: http://tableless.com.br/centralizando-um-objeto-na-horizontal-e-vertical-com-css/

Answer 9

I believe that with display:grid be the easy way! I left the comments in CSS

OBS: Works from IE10 forward! https://www.w3.org/TR/css-grid-1/

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>

Answer 10

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

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

Answer 11

Thank you all for your help.

I got it this way.

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

So it worked. 100% aligned!