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;
}
InformationsquelleAutor | 2014-09-14