Como alinhar verticalmente uma imagem dentro de uma div


1456

Como você pode alinhar uma imagem dentro de uma contenção div?

Exemplo

No meu exemplo, preciso centralizar verticalmente o <img>no <div>com class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameA altura da imagem é fixa e a altura da imagem é desconhecida. Posso adicionar novos elementos .framese essa for a única solução. Estou tentando fazer isso no Internet Explorer 7 e posterior, WebKit, Gecko.

Veja o jsfiddle aqui .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>


3
Olá, desculpe, mas não concordo em usar um ajudante aqui, sendo a solução mais valorizada. Mas não é o único caminho. Outros são os mesmos suportados pelos navegadores. Eu ofereço uma solução aqui no stackoverflow.com/a/43308414/7733724 e no W3C.org sobre informações. Você pode verificar. Cheers
Sam

O artigo Reading Centering Things no W3C será útil: w3.org/Style/Examples/007/center.en.html
QMaster

Respostas:


2128

A única maneira (e a melhor entre navegadores) que conheço é usar um inline-blockauxiliar com height: 100%e vertical-align: middlenos dois elementos.

Portanto, existe uma solução: http://jsfiddle.net/kizu/4RPFa/4570/

Ou, se você não deseja ter um elemento extra nos navegadores modernos e não se importa em usar expressões do Internet Explorer, pode usar um pseudoelemento e adicioná-lo ao Internet Explorer usando uma Expressão conveniente, que é executada apenas uma vez por elemento , para que não haja problemas de desempenho:

A solução com :beforee expression()para o Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/


Como funciona:

  1. Quando você tem dois inline-blockelementos próximos um do outro, pode alinhar um ao outro, para vertical-align: middleobter algo assim:

    Dois blocos alinhados

  2. Quando você tem um bloco com altura fixa (em px, emou outra unidade absoluta), você pode definir a altura de blocos internos em %.

  3. Portanto, adicionar um inline-blockcom height: 100%um bloco de altura fixa alinharia outro inline-blockelemento nele ( <img/>no seu caso) verticalmente perto dele.

2
Você pode ver por si mesmo: jsfiddle.net/kizu/Pw9NL - somente caixas em linha não geram uma caixa, mas todos os outros casos funcionam bem.
kizu 6/09/11

3
Resposta muito boa. Eu estava lutando com os espaços entre os elementos do bloco embutido, ou seja, entre .framee .frame:before. Uma solução proposta aqui é adicionar margin-left: -4pxa .frame. Espero que isto ajude.
Mick

111
PRESTE ATENÇÃO que: <img src=""/>NÃO está dentro do <span></span>auxiliar que foi adicionado. Está lá fora. Eu quase puxei cada mecha do meu cabelo por não perceber isso.
ryan

50
Parece que você também precisa adicionar "espaço em branco: nowrap;" para o quadro ou você terá um problema se houver uma quebra de linha entre a imagem e a extensão do auxiliar. Levei uma hora porque essa solução não estava funcionando para mim.
Juminoz

2
No meu caso, minha imagem tinha altura e largura máx. Definidas como 100% para que a imagem dimensionasse o contêiner e esse método não funcionou. Minha solução foi alterar esses valores para 90% (o que, no meu caso, foi bom; em outra situação, pode ser necessário dimensionar o contêiner de acordo) e também adicionar um auxiliar ao outro lado da imagem para que o preenchimento permaneça uniforme. ambos os lados.
Eric Dubé

513

Isso pode ser útil:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

74
Se você também deseja alinhar horizontalmente a imagem, adicione à esquerda: 0; direita: 0; para img
jameskind 02/02

este não está funcionando no IE10? Eu meio que usando este em todo o lugar
Max Yari

Também funciona (para mim) com o recipiente div tendoposition:fixed;
PJ Brunet

1
Solução mais fácil e mais limpa, obrigado!
KDT

Obrigado! Trabalhou para mim !!
Alexander Malygin

486

A solução de matejkramny é um bom começo, mas imagens grandes têm uma proporção errada.

Aqui está o meu garfo:

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

pré-visualização


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Alguma maneira de adaptar isso para que você possa ampliar a imagem de grandes dimensões, digamos 2x, e ela ainda permanecerá centralizada na horizontal e na vertical?
Justin

Se queremos fazê-lo funcionar para alinhamento vertical inferior, em vez de médio, que códigos devem ser modificados?
bobo

1
@bobo basta remover o top: 0;. Isso resulta em apenas bottom: 0;ser aplicado verticalmente.
Jomo

A melhor resposta!
user315338 11/02

278

Uma solução de três linhas:

position: relative;
top: 50%;
transform: translateY(-50%);

Isso se aplica a qualquer coisa.

A partir daqui .


Prefixos: -ms- ou -webkit- (antes da transformação). w3schools.com/cssref/css3_pr_transform.asp
Jorge Orpinel

3
Prefixos para o IE9, mas não funcionam no IE8 e inferior: caniuse.com/#search=transform Mas minha opinião: não me importo com o IE8
Reign

Ninguém percebeu o que acontece quando o filho a ser centralizado é mais alto que a tela do dispositivo e o pai é o primeiro filho no DOM ...?
tao

3
Bom quando você não pode usar position: absolute;porque precisa de uma largura fluida.
plong0

2
Melhor solução até agora, ainda melhor que o flexbox, com suporte para a maioria dos navegadores modernos e antigos. Upvote this please
albanx

141

Uma solução CSS pura :

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Coisas importantes

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Por favor, deixe-me encaminhá-lo para um guia aqui que funciona até mesmo para IE5 (deduzindo-se o que eu li até agora no post) webmasterworld.com/css/3350566.htm
Matej

Essa solução é um bom começo, mas as imagens grandes são redimensionadas com uma proporção incorreta . Por favor, veja minha resposta.
jomo

@ HansWürstchen sim, mas o ponto é centralizar, se o tamanho é grande demais é a escolha do design. Adicionando mais css = mais desordem :)
Matej

1
@matejkramny não fica muito grande. se a imagem for grande demais, ela terá uma proporção errada. isso significa que é esticada em altura e não parece adequada.
jomo

✔ Uau, isso funciona com imagens transbordantes (maiores que o invólucro), a resposta aceita não.
Cedric Reichenbach

120

Para uma solução mais moderna, e se não houver necessidade de oferecer suporte a navegadores herdados, faça o seguinte:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

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

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Aqui está uma caneta: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


3
Isto é especialmente útil se a altura do recipiente não está definido
Dave Barnett

ou align-selfpara itens individuais
Michael

O problema align-selfé que os itens flex aumentam a altura do contêiner pai.
Ricardo Zea

101

Dessa forma, você pode centralizar uma imagem verticalmente ( demo ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

4
Estranhamente, não consegui obter a resposta aceita para trabalhar na minha situação (eu também estava cortando a imagem com estouro: oculto). Isso funcionou perfeitamente, no entanto.
Luca Spiller

3
Eu só testei isso no Chrome, mas a altura da linha parece ser a chave. Eu coloquei o atributo vertical-align na div, e não no img, pois meu img está dentro de uma âncora (<a/>).
Todd Price

1
Sim, muito mais simples que a solução aceita e funciona lindamente. Eu também encontrei esta solução no jsfiddle.
vdboor

1
Se você sabe que alturas para atender, isso funciona muito bem
KrekkieD

Da minha experiência, esta solução funciona apenas font-size: 0para div. Para contêineres muito grandes, você pode perdê-lo, mas se o seu divé 100px e o img é 80px, será alguns pixels menor.
alTus

38

Além disso, você pode usar o Flexbox para obter o resultado correto:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>


28

Existe uma solução super fácil com o flexbox!

.frame {
    display: flex;
    align-items: center;
}

5
Sim, mas você mal consegue vê-lo em todas as respostas. Eu estava tentando destacá-lo de forma simples e clara, pois é uma solução muito mais fácil do que todas as outras respostas.
precisa saber é o seguinte

Esta é a melhor resposta que também funcionou para mim. Mas no meu caso no quadro "inline-flex" funcionou melhor para mim. e para a imagem dentro dela eu adicionei: "vertical-align: middle".
Sophie Cooperman #

22

Você pode tentar definir o CSS do PI como display: table-cell; vertical-align: middle;


Eu já vi vários métodos, mas este era novo (mesmo em 2013) para mim.
Mike Ebert #

Melhor do que colocar a imagem dentro de uma mesa apenas para centralizá-la.
Jonats

3
exibir: table-cell nem sempre o tamanho corretamente se você quer a largura para ser 100%
Redtopia

1
O que é " PI"?
Peter Mortensen

18

Você pode tentar o código abaixo:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>


14

Solução de imagem de fundo

Eu removi o elemento image completamente e o defini como plano de fundo da div com uma classe de .frame

http://jsfiddle.net/URVKa/2/

Isso pelo menos funciona bem no Internet Explorer 8, Firefox 6 e Chrome 13.

Eu verifiquei, e esta solução não funcionará para reduzir imagens maiores que 25 pixels de altura. Existe uma propriedade chamadabackground-size que define o tamanho do elemento, mas é o CSS 3 que entra em conflito com os requisitos do Internet Explorer 7.

Aconselho você a refazer as prioridades e o design do navegador para obter os melhores navegadores disponíveis ou obter algum código do servidor para redimensionar as imagens, se você quiser usar esta solução.


Solução muito boa, no entanto, espero que algumas imagens sejam maiores que o contêiner e, neste caso, planejei usar altura máxima / largura máxima nelas. Alguma maneira de fazer isso com imagens de fundo?
Arnaud Le Blanc

este não é um "elemento .frame" é um 'div com uma classe de .frame'
JGallardo

Se a altura da imagem não exceder a altura do quadro div, esta é a melhor e mais simples solução ...
efirat

13

Imagine que você tem

<div class="wrap">
    <img src="#">
</div>

E css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Uau! Flex realmente rulzzzz! Obrigado!
Pedro Ferreira

use a capa de ajuste ao objeto se desejar que a criança ocupe toda a largura do pai e ainda esteja alinhada verticalmente ao meio. Consulte css-tricks.com/snippets/css/a-guide-to-flexbox para mover a imagem ao redor no pai usando o flex-box
mattdlockyer

11

Você poderia fazer isso:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    


Javascript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Agradável. Alguma chance de uma solução de CSS puro?
Arnaud Le Blanc

Infelizmente não, a menos que você queira usar tabelas ou descartar a compatibilidade com versões mais antigas do IE. :( Se você soubesse o tamanho exato das imagens antes da mão que seria diferente, mas não sem que não é possível com CSS sozinho.
Joseph Marikle

@ Joseph Como você o consertaria com tabelas?
Benjamin Udink ten Cate 04/04/11

@Benjamin Udink ten Cate do É confuso, mas isso poderia ser feito desta forma: jsfiddle.net/DZ8vW/2 (isso não é aconselhável, mas deve funcionar)
Joseph Marikle

1
Bem, ele atende perfeitamente às necessidades de arnauds. Sem JS, apenas CSS e HTML.
Benjamin Udink ten Cate 05/09/11

11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

A propriedade key é display: table-cell;para .frame.Div.frameé exibido como alinhado com isso, então você precisa envolvê-lo em um elemento de bloco.

Isso funciona no Firefox, Opera, Chrome, Safari e Internet Explorer 8 (e posterior).

ATUALIZAR

Para o Internet Explorer 7, precisamos adicionar uma expressão CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Ótimo. Qualquer hack para o IE7 que evitaria o javascript?
Arnaud Le Blanc

Não tenho certeza, mas talvez as expressões CSS ajudem. Mas eles também são javascript. A única diferença é que você os escreve em arquivos css, não em js.
Webars

Sim, boa ideia. Isso seria mais gerenciável (o script é executado automaticamente conforme necessário) e, como deveria ser apenas no IE7, tudo bem.
Arnaud Le Blanc

7

Minha solução: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

7

Isso funciona para navegadores modernos (2016 no momento da edição), como mostrado nesta demonstração no codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

É muito importante que você atribua uma classe às imagens ou use a herança para direcionar as imagens que você precisa centralizar. Neste exemplo, usamos .frame img {}para que apenas as imagens agrupadas por uma div com uma classe de .framesejam direcionadas.


apenas ie7, basta colocar a altura da linha: 25px;
precisa saber é o seguinte

1
não parecem ser devidamente alinhados mesmo em Firefox e Chrome ( jsfiddle.net/4RPFa/19 )
Arnaud Le Blanc

7

Experimente esta solução com CSS puro http://jsfiddle.net/sandeep/4RPFa/72/

Talvez seja o principal problema com o seu HTML. Você não está usando aspas quando define c lass& image heightno seu HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Quando trabalho com a imgtag, ela deixa 3 pixels a 2 pixels de espaço top. Agora eu diminuoline-height e está funcionando.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

A line-heightpropriedade é renderizada de maneira diferente em diferentes navegadores. Portanto, temos que definir diferentes line-heightnavegadores de propriedades.

Veja este exemplo: http://jsfiddle.net/sandeep/4be8t/11/

Confira este exemplo sobre line-heightdiferentes navegadores: diferenças de altura de entrada no Firefox e Chrome


2
Não funciona (pelo menos no Firefox). Para as aspas faltando, isso é permitido em HTML5 (não sei que tipo de documento é utilizado em que jsFiddle)
Arnaud Le Blanc

7

Não tenho certeza sobre o Internet Explorer, mas no Firefox e Chrome, se você tiver um imgem um divcontêiner, o seguinte conteúdo CSS deverá funcionar. Pelo menos para mim funciona bem:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

IE8 +, infelizmente. Tudo bem para mim, mas talvez não para os outros.
TheCarver

Também note que display:table-cell;não aceita% como larguras
Mutmatt

7

Solução usando uma tabela e células de tabela

Às vezes, deve ser resolvido exibindo como tabela / célula de tabela. Por exemplo, uma tela de título rápida. É uma maneira recomendada pelo W3 também. Eu recomendo que você verifique este link chamado Centralizando um bloco ou imagem do W3C.org.

As dicas usadas aqui são:

  • Recipiente de posicionamento absoluto exibido como tabela
  • Vertical alinhado ao conteúdo central exibido como célula da tabela

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Pessoalmente, discordo do uso de ajudantes para esse fim.


6

Uma maneira fácil que funciona para mim:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Funciona muito bem para o Google Chrome. Experimente este em outro navegador.


6

Para centralizar uma imagem dentro de um contêiner (poderia ser um logotipo) além de um texto como este:

Digite a descrição da imagem aqui

Basicamente, você quebra a imagem

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


4

Se você pode viver com margens do tamanho de pixels, basta adicionar font-size: 1px;ao .frame. Mas lembre-se de que agora no .frame1em = 1px, o que significa que você também precisa definir a margem em pixels.

http://jsfiddle.net/feeela/4RPFa/96/

Agora não está mais centrado no Opera…


3

Eu tive o mesmo problema. Isso funciona para mim:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

na verdade, a "posição: fixa" na imagem funcionou para mim, onde fiquei frustrada com as numerosas respostas falsas de pessoas sugerindo o método de célula de tabela que não funcionou em nenhum dos meus trabalhos. Com o método sugerido pelo algreat, você também não precisa de um contêiner extra.
Vasilios Paspalas

2

Você pode usar isto:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

1

Usando tablee table-cellmethod fazem o trabalho, especialmente porque você também direciona alguns navegadores antigos, eu crio um snippet para você, que você pode executá-lo e verificar o resultado:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 


0

Eu tenho brincado com o uso de preenchimento para alinhamento central. Você precisará definir o tamanho do contêiner externo de nível superior, mas o contêiner interno deve ser redimensionado e é possível definir o preenchimento com diferentes valores percentuais.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

0

A melhor solução é que

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

0

Use este:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

E você pode variar font-size.


0

Deseja alinhar uma imagem que possui um texto / título e ambos estão dentro de uma div?

Veja no JSfiddle ou no Run Code Snippet.

Apenas certifique-se de ter um ID ou uma classe em todos os seus elementos (div, img, title, etc.).

Para mim, funciona esta solução em todos os navegadores (para dispositivos móveis, você deve adaptar seu código com: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}
<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.