colocar imagem no centro de uma div

Boas,

Na horizontal já me parece centrada a imagem.
Relativamente à horizontal não me parece possível definir height:100%, deves antes definir um valor absoluto em px, e para alinhar ao centro atribuis o mesmo valor à propriedade line-height.

exemplo:
Código:
.modal-confirm {
    position: fixed;
    width: 100%;
    height: 300px;
    top: 0%;
    border: 2px solid black;
    overflow: auto;
    background-color: rgba(88, 88, 88, 0.3);
    z-index: 99999;
    text-align: center;
    line-height: 300px;
}
 
o que sugeriste funciona mas eu tenho a height a 100% porque essa div tem de ocupar o ecrã inteiro independentemente do tamanho do mesmo
 
então na minha opinião podias usar o jQuery para determinar a altura e atribuías o valor dinamicamente:

Código:
var alt = $('#modal_confirmacao').height();
$('.modal-confirm').css('line-height', alt);
 
acrescenta isto a classe da imagem
Código:
.img-loading {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

Este troque funciona quase sempre a única cisa que é necessária é que aquilo que tens de centrar tenha um height defenido (funciona também com outros elementos como divs ou forms) e não variável quando o height (do elemento que queres centrar) varia tens de usar outros troques mais manhosos e que dependem do que queres fazer.

P:S para browsers mais antigos tens de colocar os vendor prefixes na propriedade transform
 
Última edição:
a opção do cunha não funciona tão bem no ie, depois tenho de perder tempo a ver os vendor prefixes, entretanto uso a solução do segundo fiddle que o azhpo postou

edit: a opção de usar os display:table e display:table-cell também não funcionou, apesar de funcionar no fiddle, será que tem a ver com o facto de eu adicionar tanto a div exterior como a imagem ao body por javascript?
 
Última edição:
Se soberes o height do elemento podes usar em vez do translate usar margin-top: (-metade da altura do elemento);

No IE basta usares ms-transform alias se estiveres a usar grunt há um plug-in que acrecenta todos os vendor prefixes automaticamente até aceita regras como suportar todos os browsers com mais de x% de utilização
 
a opção do cunha não funciona tão bem no ie, depois tenho de perder tempo a ver os vendor prefixes, entretanto uso a solução do segundo fiddle que o azhpo postou

edit: a opção de usar os display:table e display:table-cell também não funcionou, apesar de funcionar no fiddle, será que tem a ver com o facto de eu adicionar tanto a div exterior como a imagem ao body por javascript?

Relativamente a adicionar a div exterior como a imagem por JS, não me parece que tenha efeito para não funcionar. Mas atenção, que na segunda solução que apresentei, acrescentei uma div exterior à imagem, o que é necessário. Necessitas de uma div exterior (display:table) e uma div interior (display:table-cell). Certifica-te que adicionaste a div interior.
 
Código:
.window-x-inner {
    background-color: red;
    height: 200px;
    width: 100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -100px;
    margin-left: -50px;
}

Ou em vez das margens negativas (não funciona do ie8 para baixo)
Código:
transform: translate (-50%, -50%);
-webkit-transform: translate (-50%, -50%);
-ms-transform: translate (-50%, -50%);

A vantagem deste é que podes alterar tamanho da div vermelha sem ter de andar depois a reajustar o centro

Alguma razão para teres a div pai com display: table?
 
estava a experimentar coisas com base na sugestão do azhpo

edit: eu não tenho de dar suporte a versões do ie abaixo da 8 btw o transform não me centra bem a div, mas as margens negativas sim, isto é um print da viewport do chrome

ekdkuux7i46n.png
 
Última edição:
Back
Topo