How do I vertically align a div inside of another div?

Question

I've looked at other posts but they aren't working for me. My website ( http://www.jacksewell.uk/ ) has a modal that fades in when you click the "Hire Me" button. Currently its not centred vertically but it is centred horizontally. I would like the modal to be centred both horizontally and vertically. Any help? Thanks :D

Here the markup and CSS (Sass) for the modal:

HTML:

<!-- The Modal -->
        <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
          <div class="modal-header">
            <span class="close">×</span>
              <h2>Ready to start your next project?</h2>
          </div>
          <div class="modal-body">
            <form action="form_submit.php">
                <span id="name">Name: </span><br><input type="text" name="client-name">
                <br><br>
                <span id="company">Company : </span><br><input type="text" name="company-name">
                <br><br>
                <span>Service: </span><br><select name="Service">
                <option value="Website">Website Devlelopemnt</option>
                <option value="Design">Design related tasks</option>
                <option value="SEO">SEO Related tasks</option>
                <option value="All">Full Package (Website designed & developed with SEO)</option>
              </select>
              <br><br>
                <span id="info">Extra Detail : </span>
                <br>
                <textarea rows="4" cols="50">Please add more detail about what you are looking for.
                </textarea>
                <br><br>
              <input type="submit">
            </form>
          </div>
        </div>
       </div>

CSS (Sass):

.modal
  display: none
  position: fixed
  z-index: 1
  left: 0
  top: 0
  width: 100%
  height: 100%
  overflow: hidden
  background-color: black
  background-color: rgba(0, 0, 0, 0.5)

.modal-header
  text-align: center

.modal-content
  background-color: #fefefe
  margin: 2vh auto
  padding: 20px
  border: 1px solid #888
  width: 80%
  -webkit-animation-name: modal
  -webkit-animation-duration: 450ms
  animation-name: modal
  animation-duration: 450ms

.modal-body
  display: flex
  flex-direction: column
  align-items: center
  margin: 24px
  span
    color: #212121
    font-weight: 600
  input, select, textarea
    border-radius: 5px
    padding: 6px 12px 6px 12px
    margin: 10px
    width: 220px
    border: solid 2px #d1d1d1
    outline: none
  select
    width: 250px

input[type=submit]
  border-radius: 5px
  border: 0
  width: 260px
  height: 35px
  color: #fff
  background: #3498db
  -webkit-appearance: none

.close
  color: rgba(0, 0, 0, 0.5)
  float: right
  font-size: 28px
  font-weight: bold
  transition: all ease-in-out 0.25s
  &:hover, &:focus
    color: #000
    text-decoration: none
    cursor: pointer

Answer 1

This will do the trick, hope this helps!

.modal-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

You can use flexbox. Flexbox is currently not working on IE 9 and 8, but it is fine on every other browser as you can see here .

You just have to add this css to your .modal class ( the parent of your .modal-content):

.modal { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  // Your css goes here, without the display:block;
}

For further information on centering things with css, you can check this guide: https://css-tricks.com/centering-css-complete-guide/