How to center a div (CSS loader) - html

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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/

Answer 4

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>

Answer 5

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/