响应图像的垂直和水平居中

Question

我现在已经挣扎了好几天了，我已经失去了耐心。我检查了所有其他问题，似乎没有任何解决方案可以解决我的问题。 我有一堆图像显示在视口的中心。它对移动设备不起作用（无论我在某些移动屏幕尺寸中做什么，图像都没有对齐）。我想图像容器需要90vh，因为10vh需要固定页脚。我不想使用flexbox。 请帮帮忙，我绝望了！ 感谢

<div class="col-1 mob mob1">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob1.png" alt="App Design 1">
  </div>
</div>
<div class="col-1 mob mob2">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob2.png" alt="App Design 2">
  </div>
</div>
  <div class="col-1 mob mob3">
    <div class="img_mob_container">
    <img class="img_mob" src="images/mob3.png" alt="App Design 3">
  </div>
</div>
<div class="col-1 mob mob4">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob4.png" alt="App Design 4">
  </div>
</div>
<div class="col-1 mob mob5">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob5.png" alt="App Design 5">
  </div>
</div>
<div class="col-1 mob mob6">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob6.png" alt="App Design 6">
  </div>
</div>
<div class="col-1 mob mob7">
  <div class="img_mob_container">
    <img class="img_mob" src="images/mob7.png" alt="App Design 7">
  </div>
</div>

    .mob {
      height: 100vh;
      width: 100%;
      line-height: 0;
    }

    .mob1 {
      background-color: #FDBA2E; /*dark red*/
    }
    .mob2 {
      background-color: #8C3A86; /*yellow*/
    }
    .mob3 {
      background-color: #00C8D9; /*light purple*/
    }
    .mob4 {
      background-color: #C5E000; /*light green*/
    }
    .mob5 {
      background-color: #BB7F8A; /*salmon*/
    }
    .mob6 {
      background-color: #159C7E; /*purple*/
    }
    .mob7 {
      background-color: #A20F57; /*dark pink*/
    }

    .img_mob {
      margin: 5vw 37.5%;
      max-width: 600px;
      width: 25%;
    }


    /* ----------- Mobile screens ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {

    .mob {
      height: 90vh;
      width: 100%;
      padding: 0 15vw;
    }

    .img_mob_container {
    height: 80vh;
    margin: 5vh 0;
    }

   .img_mob {
   width: 100%;
   }