A div cover the entire screen in CSS

Question

I have a panel where there is a button that pulls a function that takes a while to run, so I wanted to put an img of load and background with alpha, but it’s only taking a part of the screen equal to print:

My CSS and HTML code:

 .load { 
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  z-index: 5;
  width: 100vw;//ja tentei usando 100% tbm
  height: 100vh;//ja tentei usando 100% tbm
  overflow: hidden;
 }
 .load img{
  margin: auto auto;
 }

<div class="load"><img src="load.gif"></div>

Answer 1

Here’s an example I used display:flex in the father for the image to be aligned in the center with margin:auto

How the element has position:fixed it is relative to window, and you need to align it to the 100vh/vw fully cover the viewport, for that I put top and left as 0

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.load { 
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  z-index: 5;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
  display: flex;
 }
 .load img{
  margin: auto;
 }

  

<div class="load">
  <img src="https://placecage.com/100/100">
</div>

Answer 2

You can do it with top, right, bottom and left properties, all with value 0.

To center the image you can use transform with top, left and position, or use flexbox.

With Transform:

.load { 
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
 }
 .load img{
 position: relative;
 top: 50%;
 left: 50%;
  transform: translate(-50%, -50%);
 }

<div class="load"><img src="load.gif"></div>

Flexbox:

.load { 
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  z-index: 5;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
 }

<div class="load"><img src="load.gif"></div>