Alignment Gif Loading

Navigation
1

Hello,

I have the following code:

link

I'm trying to align it so that it stays centered on the screen regardless of screen size or orientation (whether a cell phone vertically or horizontally), but without success.

Any suggestions?

Thank you!

    
asked by anonymous 21.02.2017 / 19:05

2 answers

2

By position: absolute you can solve by putting 0 on all sides. Your CSS would look like this: 

.ajax-spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 225px;
    margin: auto;
    opacity: 1;
}
    
21.02.2017 / 19:29
1

Well a solution would be with 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>
    
21.02.2017 / 19:41
How to centralize a component using null layout? jQuery - How to filter a JSON file from an external link?