1

Con angular material, estoy intentando centrar un "mat-card" dentro de un "div". Intento centrarlo cambiando las propiedades de la clase de CSS "center-content", pero no puedo. Este es el código:

.example-card {
    max-width: 400px;
    background-color: blue;
  }
  
  .example-header-image {
    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
    background-size: cover;
  }
  .center-content {
      margin-top: 100px;
      text-align: -webkit-center;
      background-color: yellow;
  }
  .example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }
  
  .example-full-width {
      margin-top: 10px;
    width: 100%;
  }
  .mat-button{
      margin-top: 10px;
    width: 100%;
    color: white;
    height: 40px;
    background-color: #3F51B5;
  }
<div class="center-content">
  <mat-card class="example-card">
    <!-Aquí iría el contenido del matcard-->
    Contenido del mat-card
  </mat-card>
</div>

Pero el mat-card class="example-card" no me sale centrado dento del DIV principal, me sale echando a un lado.

introducir la descripción de la imagen aquí

3
  • No veo el problema. El mat-card se muestra centrado.
    – Lobos
    el 20 jun. 2021 a las 0:09
  • Ok, quizá me expresé mal. Lo que quería conseguir es que el me salga el formulario en el centro de la página. No como ahora que sale a la izquierda completamente.
    – user112766
    el 20 jun. 2021 a las 16:31
  • Sí, eso entendí. Pero probé el código que colocaste y el mat-card sale centrado por eso no veo el problema.
    – Lobos
    el 20 jun. 2021 a las 17:49

1 respuesta 1

1

Para esto podrías usar las propiedades de flex con CSS, quedaría algo así:

html,body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.center-content{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
 }

Y tu HTML así:

<div class="center-content">
  <mat-card>
    <!-Aquí iría el contenido del matcard-->
    Contenido del mat-card
  </mat-card>
</div>
4
  • Pues me sigue sin funcionar.
    – user112766
    el 5 jul. 2021 a las 22:32
  • 1
    Que extraño, estás agregando la propiedad height y width al HTML y body? el 6 jul. 2021 a las 23:05
  • No. El html es la "vista" de un componente de angular. No he agregado nada de eso.
    – user112766
    el 7 jul. 2021 a las 0:36
  • 1
    Agrega esto en el archivo style.css o scss de tu proyecto de angular: html,body{ height: 100%; width: 100%; padding: 0; margin: 0; } el 7 jul. 2021 a las 14:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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