2

Olá,

Tenho o seguinte código:

https://jsbin.com/jojukiseze/1/edit?html,css,output

Estou tentando alinhá-lo para que fique centralizado na tela independente do tamanho da tela ou orientação (seja um celular na vertical ou horizontal), porém sem sucesso.

Alguma sugestão?

Obrigado!

2
  • Coloque o html e css referente ao que está perguntando....
    – MagicHat
    Commented 21/02/2017 às 18:07
  • está tudo no link @MagicHat Commented 21/02/2017 às 18:08

2 Respostas 2

2

Por position: absolute você pode resolver botando 0 em todos os lados. Seu CSS ficaria assim:

.ajax-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 225px;
    margin: auto;
    opacity: 1;
}
3
  • Perfeito Leon, simples e eficiente, muito obrigado!! Commented 21/02/2017 às 18:33
  • Que bom que ajudou! :) Commented 21/02/2017 às 18:34
  • fico bom mesmo...
    – MagicHat
    Commented 21/02/2017 às 18:42
2

Bom uma solução seria com Flexbox:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="mask-loading">
    <figure class="alinha-loading">
      <img class="ajax-spinner img-responsive" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/585d0331234507.564a1d239ac5e.gif" alt="carregando...">
    </figure>
  </div>
</body>
</html>
<style>
.mask-loading{
	position: fixed;
	z-index: 100;
	background-color: #000;
	opacity: 0.8;
	width: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.alinha-loading{
    z-index: 1000;
    width: 225px; 
	opacity: 1;
    max-width: 50%;
  
}
</style>

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 .