Comment définir un spinner dans le milieu de l'écran avec le CSS?
j'ai besoin d'un peu de CSS aider, j'ai un spinner pour le chargement de la page, centré totalement, il est centré verticalement, mais maintenant, comment puis-je centre spinner pour tous les largeurs d'écran?
C'est mon balisage:
<!DOCTYPE html>
<html>
...
<body>
<div class="loading">
<div class="loader"></div>
</div>
...
</body>
</html>
et c'est ma feuille de style:
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
background: #fff;
}
.loader {
font-size: 10px;
border-top: .8em solid rgba(218, 219, 223, 1);
border-right: .8em solid rgba(218, 219, 223, 1);
border-bottom: .8em solid rgba(218, 219, 223, 1);
border-left: .8em solid rgba(58, 166, 165, 1);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 8em;
height: 8em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
Vous devez vous connecter pour publier un commentaire.
Depuis l'élément a une largeur fixe de
8em
, vous pouvez ajouterleft: 50%
puis déplacer de la moitié de la largeur de l'élément à l'aide demargin-left: -4px
:mise à Jour de l'Exemple
Si les dimensions de l'élément ne sont pas fixes et connus à l'avance, voir mon autre réponse, pour d'autres options.