5

Pues eso, no puedo centrar verticalmente un contenido usando CSS Grid, con Flexbox no tenía problemas, estoy empezando recién con CSS Grid. Esto es lo que he intentado:

Usar el clásico método con transform y translateY:

.body {
  height: 100%;
}

.grid {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

También probé con usar un contenedor que englobe al grid así:

.container {
  align-items: center;
  justify-content: center;
  height: 100%;
}

Pero nada de esto me ha servido.

Lo que quiero es centrar el div con clase .grid respecto al alto del dispositivo donde se cargue la página (por ello agregué el 100vh al body).

Comparto mi código:

* {
  box-sizing: border-box;
}

body {
  color: white;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  align-items: center;
  margin: 2rem!important;
}

.grid {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: [inicio-contenido] 1fr [fin-contenido];
  grid-template-rows: auto [inicio-contenido] auto [fin-contenido];
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: 4fr [inicio-contenido] 4fr [fin-contenido];
  }
  header {
    grid-column: 1 / 3;
  }
  aside {
    grid-column: 1;
    grid-row: 2;
  }
  footer {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

article {
  grid-column: inicio-contenido;
  grid-row: inicio-contenido;
}

header,
aside,
article,
footer {
  background: #333;
  padding: 2rem;
  border-radius: .4rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<body>

  <div class="grid">
    <header>Header</header>
    <aside>Aside</aside>
    <article>
      <h1>Mi título</h1>
      <p>Contenido cool</p>
    </article>
    <footer>Footer</footer>
  </div>

</body>

PD: Por alguna razón, aquí en el snippet me está tomando primero los estilos de normalize.css y no los míos, tuve que agregar el !important en body por este motivo.


Adjunto una imagen de lo que quiero lograr: El lado A es lo que tengo actualmente, el lado B es como quiero quede, que quede centrado dependiendo del alto del navegador.

Imagen de ejempplo

2
  • Todo lo que está dentro del div con clase .grid
    – EMCode
    el 7 dic. 2019 a las 16:51
  • Gracias por tu interés @Aprendiz acabo de editar añadiendo una imagen, lo que quiero es que el contenido del div class grid se centre verticalmente dependiendo del alto del navegador o dispositivo donde se visualice. No me interesa centrar el texto que contenga. No tengo inconveniente con eso.
    – EMCode
    el 7 dic. 2019 a las 17:38

2 respuestas 2

4

Considera:

  • Usa grid para establecer la estructura de tu grilla
  • Usar mejor flexbox para la alineación de los elementos sobre alguno de sus 2 ejes

Puedes construirlo de esta forma.

Procedimiento

  • A la etiqueta padre del div con la clase grid es decir la etiqueta body aplicale un display: flex;, para que de este modo su nodo hijo que es el div con la clase grid se vuelva flexible y lo podamos mover sobre alguno de los ejes que componen a flexbox
  • Eso momentaneamente moverá la maquetación de tus divs dejando todo de un extremo, del izquierdo al derecho, pues todo se acomoda sobre el main axis

Ejemplo

    <style>
      body{
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
      header {
        grid-column: 1/3;
        background: grey;
      }
      aside {
        grid-column: 1/2;
        background: grey;
        margin-top: 10px;
        margin-right: 10px;
      }
      article {
        background: grey;
        margin-top: 10px;
      }
      footer {
        background: grey;
        margin-top: 10px;
        grid-column: 1/3;
      }
    </style>
    <body>
    
      <div class="grid">
        <header>Header</header>
        <aside>Aside</aside>
        <article>
          <h1>Mi título</h1>
          <p>Contenido cool</p>
        </article>
        <footer>Footer</footer>
      </div>
    
    </body>

Nota: Prueba este código en algún sistema como JS Fiddle para que puedas ver mejor su funcionamiento

Agrego el snnipet con el ejemplo

2
  • Lo siento pero no funciona, lo veo igual, pegado a la parte superior. Podrías agregar un snippet por favor? A lo mejor me estoy perdiendo algo.
    – EMCode
    el 7 dic. 2019 a las 18:34
  • 1
    Tuve que mover un poco mi código pero al final pude lograrlo con su ayuda. Muchas gracias!
    – EMCode
    el 7 dic. 2019 a las 19:22
1

Prueba a poner un centrado vertical a la etiqueta del contenedor en concreto a través de CSS:

.centrado {vertical-align: middle;display:inline;}

<div class="grid">
<header>Header</header>
<aside>Aside</aside>
<article>
<div class="centrado">
<h1>Mi título</h1>
<p>Contenido cool</p>
</div>
</article>
<footer>Footer</footer>
</div>
3
  • Gracias, ya intenté hacerlo, pero al ser un sistema con CSS Grid se complica la implementación.
    – EMCode
    el 7 dic. 2019 a las 19:23
  • Gracias por tu aclaración y disculpa porque mi respuesta no ayuda a tu consulta, al leearla rápido no entendí cortrectamente la necesidad de tu código, siento no haberte podido ayudar. No obstante el compañero que responde arriba te da un muy buena ayuda. Lamento la confunsión.
    – JorgeGuz
    el 10 dic. 2019 a las 8:21
  • Gracias a usted por su tiempo. Un saludo!
    – EMCode
    el 18 dic. 2019 a las 12:38

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.