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.
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.