How to center a div (CSS loader)

user_8259605 0
Viewed 11461

JS Fiddle: fiddle and here is the code: 

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="loader"></div>

How do I centre it horizontally & vertically?

I tried: 

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

But transform:translate(-50%,-50%); do not work

css html
5 Answers

Give below css to .loader class:

  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;


.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="loader"></div>

user_80243540

You can make it position:absolute;

and give it: 

top:0;
left:0;
right:0;
bottom:0;

to make it both vertically and horizontally aligned into the middle.

body {
  overflow:hidden;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="loader"></div>

user_24714230

Easiest way to center element using CSS is by using flexbox. No hacks required.

if need to set parent container with display: flex.

<div class="container">
   <div class="item">
      Aligned Item
   <div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 200px;
  height: 200px;
}

All elements with class item will be centrally aligned.

More details can be found at

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

user_19043770

Several ways to do it.

Using flexbox. This would work in any container anywhere on the page.

body {  /* or some wrapper, if you plan to have other things in body */
  min-height: 100vh; /* this just expands the body height so the vertical alignment is visible in the snippet */
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="loader"></div>

Using position: absolute. This centers the div relative to the document, not loader's parent element.

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;

  /* i added this: */
  position: absolute;
  left: calc(50% - 120px / 2); /* 50 % of body width minus half of .loader size… */ 
  top: calc(50% - 120px / 2);  /* …and the same thing with height */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="loader"></div>

user_37762990

Please add body {height: 100vh;} and update the css of loader div as the following:

.loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

https://jsfiddle.net/7baw2rmp/

user_52235220
Related