文本和图像在两行中垂直居中

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度，保证垂直居中在整个页面中生效 */
}

.text {
  text-align: center;
}

.image {
  display: block;
  margin: 0 auto; /* 水平居中 */
}

<div class="container">
  <p class="text">文本内容</p>
  <img class="image" src="image.jpg" alt="图像">
</div>

.container {
  display: table;
  height: 100vh; /* 设置容器高度为视口高度，保证垂直居中在整个页面中生效 */
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="container">
  <div class="row">
    <div class="cell">
      <p>文本内容</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <img src="image.jpg" alt="图像">
    </div>
  </div>
</div>