How to make a center fullscreen loader

Question

My loader position not in middle center, please change my code. (im sorry my english is bad haha). ok senior designer, this my code.

.loader-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 100vw;
  height: 100vh;
  z-index: 9999999999;
}

this is preview of my code, can you make this in center middle position? please, this my first project hehe :)

Answer 1

For the container as overlay to span the entire viewport just use position: fixed; inset: 0; which is shorter and easier.

To center the loader use Flexbox. justify-content aligns the child elements along the main-axis (flex direction) and align-items along the cross axis.

top: 50% does not work correctly in your case as percentages are always relative to the parent element. By default an elements height will be auto or which is undefined and calculated to fit-content. 50% of undefined is also undefined!

.loader {
  height: 4rem;
  width: 4rem;
  background-color: blue;
  border-radius: 50%;
}

.loader-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="loader-container">
  <div class="loader"></div>
</div>