正文和内容div高度100（自举4）+角度

Question

I want to set <div class="card"> center of page or body, It work perfect on desktop browser but, in mobile view not work, i can set it on center using...

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

and

h-100,

align-items-center 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>

it work perfect on desktop browser

but in mobile view form cut from top and bottom and body repeat at scroll

Answer 1

To prevent your form from cutting, add display:table , or display:grid to your parent .container:

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

Regarding the linear-gradient repeating at body scroll, make sure your html and body fill the page:

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