0

Estoy haciendo un loader con CSS, quiero que quede justo al centro de la pantalla tanto de forma horizontal como vertical pero no puedo.

.loader{
  border: 16px solid #d4d4d4;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
  position: fixed;
  left : 50%;
  bottom : 0;
  right : 0;
  top : 50%;
}

.loader-background {
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: #eaeaea4a;
    z-index: 9999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<div class="loader-background"><div class="loader"></div></div>

He intentado moverlos con las propiedades left,bottom,right,top Pero no consigo el efecto, y se desacomoda cuando la pantalla es móvil.

Alguna sugerencia de favor?

8
  • haz intentado con 0 auto ?
    – srJJ
    el 24 sep. 2018 a las 17:22
  • Dónde pongo eso? el 24 sep. 2018 a las 17:24
  • para el alineado en horizontal es: display:block;margin-right:auto;margin-left:auto; el alineado en vertical lo podes hacer dandole un margin a mano. Y sacandole los left, top, etc q le pusiste. el 24 sep. 2018 a las 17:27
  • Hay varias preguntas en el sitio sobre cómo centrar elementos vertical y horizontalmente (y ambas). Si las has probado, ¿qué problemas te han dado?
    – Alvaro Montoro
    el 24 sep. 2018 a las 17:30
  • debes ponerlo en la clase que has creado para ese elemento .loader
    – srJJ
    el 24 sep. 2018 a las 17:33

1 respuesta 1

3

puedes intentar con lo siguiente:

body, html {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.loader-background {
    width: 100%;
    height: 100%;
    position: relative; /* Cambiamos de absolute a relative */
    background-color: #eaeaea4a;
    z-index: 9999;
}

.loader{
  border: 16px solid #d4d4d4;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
  position: absolute; /* cambiamos de fixed a absolute */
  /* Ponemos el valor de left, bottom, right y top en 0 */
  left: 0;
  bottom: 0; 
  right: 0; 
  top: 0; 
  margin: auto; /* Centramos vertical y horizontalmente */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<div class="loader-background">
  <div class="loader"></div>
</div>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.