тело и содержимое div высота 100 в начальной загрузке 4 + угловой

Question

Я хочу установить <div class="card"> центр страницы или тела. Он отлично работает в браузере настольного компьютера, но в мобильном представлении не работает, я могу установить его по центру, используя ...

html, body {
  height: 100%;
  background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}

и

h-100,

центр выравнивания предметов h-100

<div class="container h-100">
  <div class="row align-items-center h-100 pt-5 pb-5">
    <form class="col-12 wow fadeInUp " data-wow-delay="0.2s">
      <div class="card"> 
       ...
      </div>
    </form>
  </div>
</div>

отлично работает на рабочем столебраузер

, но в мобильном представлении форма вырезана сверху и снизу и тело повторяется при прокрутке

Answer 1

Чтобы предотвратить вырезание вашей формы, добавьте display:table или display:grid к родительскому .container:

<div class="container h-100 "style="display:grid">...</div> или: <div class="container h-100 d-table">...</div>

Относительно линейного градиентаповторяя при прокрутке тела, убедитесь, что ваши html и body заполняют страницу:

body { min-height: 100%; overflow: auto; }