使用grid或flexbox

.container {
            text-align: center;
            display: grid;
            place-content: center;
            grid-template-columns: 100px 100px;
            gap: 1em;
            padding:1em;
            border: 2px solid black;
        }

        .block {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            justify-content: center;
            row-gap: 40px;
        }

<div class="container">
        <div class="block">Image<br>Text</div>
        <div class="block">Image<br>Text</div>
        <div class="block">Image<br>Text</div>
        <div class="block">Image<br>Text</div>
    </div>

一种解决方案是使用网格：网格为您的外部网站，和嵌套网格内为您的图像和文本。

body {
  margin: 0;
  padding: 0;
}

#grid-site {
  display: grid;
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  gap: 0;
  width: 100%;
  height: 100vh;
}

#header {
  grid-area: 1 / 1 / 2 / 4;
  background-color: rgba(126, 79, 15, 0.5);
}

#main {
  grid-area: 2 / 1 / 3 / 4;
  background-color: rgba(10, 61, 14, 0.5);
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: calc(100vh - 150px);
  /* header 80, footer 70 */
}

#footer {
  grid-area: 3 / 1 / 4 / 4;
  background-color: rgba(252, 163, 56, 0.5);
}

#main>div {
  position: relative;
  margin: 1em;
}

#div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: rgba(126, 79, 15, 0.5);
}

#div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: rgba(10, 61, 14, 0.5);
}

#div3 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: rgba(252, 163, 56, 0.5);
}

#div4 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: rgba(197, 254, 124, 0.5);
}

#main img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  width: auto;
}

#main p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #999999;
}

<div id="grid-site">
  <div id="header">header</div>
  <div id="main">
    <div id="div1">
      <img src="https://picsum.photos/id/237/800/600" alt="">
      <p>image 1</p>
    </div>
    <div id="div2">
      <img src="https://picsum.photos/id/182/800/600" alt="">
      <p>image 2</p>
    </div>
    <div id="div3">
      <img src="https://picsum.photos/id/84/800/600" alt="">
      <p>image 3</p>
    </div>
    <div id="div4">
      <img src="https://picsum.photos/id/21/800/600" alt="">
      <p>image 4</p>
    </div>
  </div>
  <div id="footer">footer</div>
</div>

背景色可以删除，这只是为了查看