12

Preciso centralizar imagens dentro de uma div. Consigo fazer isso horizontalmente com text-align:center;, porém quero centralizar verticalmente. Tentei vertical-align: middle; e display: table-cell; e não funcionou.

Existe alguma outra solução? Se possível, somente usando CSS.

3
  • Prevejo que essa será uma dúvida muito comum no futuro, então esta pergunta é uma boa candidata para ser protegida. Commented 11/02/2014 às 13:57
  • Você poderia adicionar mais algumas informações. Por exemplo, seu div tem largura e altura fixas?. Alguns trechos de html/css também seriam bons. Commented 11/02/2014 às 14:01
  • Esta questão está resolvida? Se estiver aceite a resposta que a soluciona. Commented 7/04/2015 às 20:36

11 Respostas 11

11

Isso deve resolver o seu problema:

div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
2
  • 2
    Dei voteup pois essa é a maneira certa de se fazer, sei que é obvio, mais isso só vai funcionar se o width da div for maior que a imagem. Commented 11/02/2014 às 14:02
  • 1
    O alinhamento horizontal é realmente a melhor forma de fazer, mas alinhamento vertiacal tem que ser em 2 nível, um nível com 'display:table;' e outro nível com 'displau:table-cell' aí sim pode ser utilizado o 'vertical-align: middle;' Commented 11/02/2014 às 14:10
9

Caso não seja necessário um suporte para o Internet Explorer 8 ou o projeto seja mais flexível também é possível utilizar o seguinte código:

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

Fonte - http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Também vale lembrar que o uso do display:table não funciona com float.

Uma outra solução, para quem precise dar suporte abaixo do 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)';
}

Outra solução caso o suporte ao Internet Explorer 6 seja necessário:

.vertical-align {
    position: relative;
}

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

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

Fonte - http://css-tricks.com/vertically-center-multi-lined-text/

9

Embora faça algum tempo que foi feito essa pergunta; estarei mostrar uma forma fácil de centralizar imagens usando flex-box, para ajudar os que precisarem.

Insira uma classe na div e coloque a tag img dentro da div, como mostrado abaixo:

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

No CSS insira:

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

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

Se você quiser estudar mais sobre flex-box, no site CSS-Tricks está disponibilizado um guia mais completo.

1
  • A única resposta/sugestão que funcionou para mim (março/2020)
    – Fernandes
    Commented 18/03/2020 às 1:38
5

O que está faltando é o display:table; no container da div que está com display: table-cell; colocando isso vai funcionar perfeitamente. veja o exemplo: 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>
4

A forma mais simples que conheço e tenho certeza que não falha é essa

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

Esta é uma forma cross-browser de se fazer o alinhamento independente de a imagem ser paisegem ou retrato.

2

Para centralizar uma imagem dentro de uma div, você precisa, primeiramente, colocar a div com position: relative e a imagem com position: absolute.

Após isso,transform: translate(-50%,-50%), juntamente com top 50% e left 50%, como pode ser visto no exemplo abaixo:

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

Tente com line-height:.

Exemplo:

line-height: 40px;
0

Aqui uma forma:

EXEMPLO

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

Fonte: http://tableless.com.br/centralizando-um-objeto-na-horizontal-e-vertical-com-css/

4
  • Isso também vai funcionar com imagens de tamanhos diferentes? Commented 11/02/2014 às 13:54
  • 1
    Sim, basta definir o tamanho da imagem e colocar as margin negativa, por exemplo, se definir width: 500px e height: 100px. Então a margin-left deve ser a metade de width negativo no caso magin-left: -250px e o margin-top deve ser a metade do tamanho de height negativo, no caso margin-top: -50px Commented 11/02/2014 às 14:05
  • Amigo, quando uso margens negativas, sinto que estou fazendo algo errado, hehe. Commented 11/02/2014 às 16:03
  • 1
    Tudo bem, só citei uma de N formas de fazer o que quer. Commented 11/02/2014 às 16:05
0

Se seu div e sua imagem tiverem um heigth definido, você pode fazer isso:

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

Obrigado à todos pela ajuda.

Eu consegui da seguinte forma.

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

Assim funcionou. 100% alinhado!

0

Acredito que com display:grid seja a forma mais fácil! Deixei os comentário no CSS

OBS: Funciona do IE10 para frente! 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .