How to make the modal be in the center of the screen?

Question

css

The problem is that when the screen is reduced in height, the modal window crawls out of the browser window. If you set the height, for example, 85%, then the content from the modal window drops out. How to make a modal window of the same height display well?
Standard Browser Height:
Reduced Browser Height:

Html:

<div class="wrapper-form">
            <div class="form-content">
                <h3>Hire <span class="colororange">us</span></h3>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa<br> qui officia deserunt mollit anim id est laborum</p>
                <form action="#" class="form-hireus">
                    <input type="email" class="email-hireus" placeholder="Your Email">
                    <input type="text" class="subject-hireus" placeholder="Subject">
                    <textarea class="textarea-hireus" placeholder="Your Message"></textarea>
                    <input type="submit" class="button button-modal" value="Send Message">
                </form>
                <a href="#" class="btn-close-modal">
                    <img src="assets/img/btn/btn-close-modal.png" alt="close-modal">
                </a>
            </div>
        </div>

CSS:

.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(59, 67, 76, 0.5);
}
.wrapper-form .form-content {
  padding: 60px 105px;
}
.wrapper-form h3 {
  padding: 0;
  margin: 0;
  color: #424242;
  font-weight: 600;
  font-size: 2.188em;
  margin-bottom: 29px;
  text-transform: uppercase;
}
.wrapper-form p {
  color: #424242;
  line-height: 30px;
  font-size: 1em;
  margin-bottom: 46px;
}
.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.form-content::after {
  display: table;
  clear: both;
  content: '';
}
.email-hireus,
.subject-hireus {
  width: 100%;
  height: 50px;
  display: block;
  border-radius: 10px;
  padding-left: 23px;
  margin-bottom: 29px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.btn-close-modal {
  top: -19px;
  right: -19px;
  position: absolute;
}
.textarea-hireus {
  width: 100%;
  height: 231px;
  resize: none;
  display: block;
  border-radius: 10px;
  padding: 20px 23px;
  margin-bottom: 30px;
  border: 1px solid rgba(59, 67, 76, 0.3);
}
.button-modal {
  width: 100%;
  border: none;
  background-color: #f7600e;
}

Answer 1

Problem solved:

.wrapper-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-y: auto;
  display: none;
  background-color: rgba(59, 67, 76, 0.5);
}

.form-content {
  width: 85%;
  max-width: 763px;
  height: auto;
  background-color: #fff;
  position: absolute;
  text-align: center;
  z-index: 2;
  left: 50%;
  margin: 10% auto; 
  transform: translateX(-50%);
}

Answer 2

how exactly do you want it to be displayed when the content doesn't fit the screen?
1) scroll on the browser window itself - for this you do overflow: hidden for the body when opening the modal and scroll on the modal wrapper
2) scroll on the modal itself - here you just limit the height of the modal and give it overflow-y: auto;

Answer 3

you can use flexbox : justify-content:center; align-items:center;
same with absolute : left:50%; right:50%; transform:translate(-50%,-50%);