在固定大小的盒子中让图片和文字居中显示

<div class="container">
  <img src="your_image.jpg" alt="Your Image">
  <p>Your text here</p>
</div>

 .container {
    border: 1px solid red;
    width: 300px; /* 设置盒子的宽度 */
    height: 300px; /* 设置子的高度 */
    display: flex; /* 使用弹性盒子布局 */
    flex-direction: column; /* 将子元素垂直排列 */
    justify-content: center; /* 在垂直方向上居对齐 */
    align-items: center;
  }

  img {
    height: 200px;
    width: 200px;
  }

  .container p {
    text-align: center; /* 文字水平居中对齐 */
  }

效果 :