Wie ein div (CSS loader) zum Zentrum

Question

JS Fiddle: fiddle und hier ist der 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>

Wie zentriere ich es horizontal & vertikal?

Ich habe versucht:

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

Aber transform:translate(-50%,-50%); funktionieren nicht

Answer 1

unter css Gib .loader Klasse:

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

können Sie machen es position:absolute;

und geben ihm:

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

in die Mitte es sowohl vertikal als auch horizontal ausgerichtet zu machen.

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

Mehrere Möglichkeiten, es zu tun.

Verwenden von flexbox. Dies funktioniert in jedem Container auf der Seite.

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>

Mit position: absolute. Dies zentriert die div relativ zum Dokument, nicht das Elternelement des Ladeprogramms.

.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 4

Bitte fügen body {height: 100vh;} und aktualisieren Sie die CSS des Laders div wie die folgenden:

.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/

Answer 5

Der einfachste Weg Element zum Zentrum mit CSS ist von Flexbox mit . Keine Hacks erforderlich.

Wenn der übergeordnete Container mit display: flex festgelegt werden muss.

<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; 
} 

Alle Elemente mit Klasse item werden zentral ausgerichtet.

Weitere Informationen finden Sie unter

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