align the loader at the center of the screen

Question

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         .loader {   
         border: 16px solid #f3f3f3;
         border-radius: 50%;
         border-top: 16px solid #3498db;
         width: 120px;
         height: 120px;
         -webkit-animation: spin 2s linear infinite; /* Safari */
         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); }
         }
      </style>
   </head>
   <body>
      <h2>How To Create A Loader</h2>
      <div class="loader"></div>
   </body>
</html>

I am not able to align the loader at the center of the screen. I have tried putting align:center in the loader class but that did not work.

https://www.w3.org/Style/Examples/007/center.en.html – Mitya Apr 22 '20 at 11:02 — Mitya, Apr 22 '20 at 11:02

Wahab Shah · Answer 1 · 2020-04-22T11:06:52.523

0

Use flex box it would be simple and no extra css.

display: flex;
align-items: center;

You can study about flex box for further details, here and here

edited Apr 22 '20 at 11:06

answered Apr 22 '20 at 11:04

Wahab Shah

2,066
1
14
19

Flexbox would be "extra CSS" in itself. – Rob Apr 22 '20 at 11:06
much less than negative margins, and all other hacks. The purpose it solved without any such stuff. – Wahab Shah Apr 22 '20 at 11:16

score -1 · Answer 2 · answered Apr 22 '20 at 11:08

<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         body {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100vh;
         }
         .loader {   
           border: 16px solid #f3f3f3;
           border-radius: 50%;
           border-top: 16px solid #3498db;
           width: 120px;
           height: 120px;
           -webkit-animation: spin 2s linear infinite; /* Safari */
           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); }
         }
      </style>
   </head>
   <body>
      <h2>How To Create A Loader</h2>
      <div class="loader"></div>
   </body>
</html>

score -2 · Answer 3 · answered Apr 22 '20 at 11:07

Welcome to Stack Overflow, Himanshu.

You can use the margin property to center the loader on the screen. The margin property sets the margins for an element (i.e. how far to the top, right, bottom and/or left an item is in relation to another on the DOM). If you supply auto to margin-left and margin-right, the loader will be positioned on the center of the screen.

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

A shortened version would be margin: 0 auto 0 auto;.

align the loader at the center of the screen

3 Answers3