Как я могу вертикально центрировать весь текст в сетке?

Question

Не касаясь моего HTML, как я могу расположить весь текст так, чтобы он располагался в середине моего изображения?

Я пробовал использовать justify-content, align-content, et c, но не работает.

h1 { grid-area: h1; }  
h2 { grid-area: h2; }  
p { grid-area: p; }  
img { grid-area: img; }
  

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "h1 img" 
    "h2 img" 
    "p img" 
    ". img"; 
  
   text-align: center;
}

<div class="grid">
  <h1>Header</h1>
  <h2>Subheader</h2>
  <img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
  <p>some paragraph text...</p>
</div>

Answer 1

Замените grid-template-areas на

". img"
"h1 img"
"h2 img"
"p img"
". img";

и добавьте align-content:center

h1 {
  grid-area: h1;
}

h2 {
  grid-area: h2;
}

p {
  grid-area: p;
}

img {
  grid-area: img;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: ". img" "h1 img" "h2 img" "p img" ". img";
  text-align: center;
  align-content: center;
}

.grid>* {
  padding: 0;
  margin: 0;
  border: solid red;
}

<div class="grid">
  <h1>Header</h1>
  <h2>Subheader</h2>
  <img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
  <p>some paragraph text...</p>
</div>

Answer 2

Для вертикального выравнивания вы должны использовать

align-items: center

Здесь вы можете найти подробное объяснение выравнивания сетки. Центрирование по CSS Сетка