divを別のdivの内部に垂直に配置するにはどうすればよいですか？

Question

私は他の投稿を見ましたが、私のために働いていません。私のウェブサイト（http://www.jacksewell.uk/）には、「Hire Me」ボタンをクリックするとフェードインするモーダルがあります。現在は垂直にセンタリングされていませんが、水平にセンタリングされています。私は、モーダルを水平方向と垂直方向の両方にセンタリングしたいと思います。どんな助け？ ありがとう：Dここで

モーダルのためのマークアップとCSS（サス）：

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（サス）：

.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

これは、トリックを行います、 お役に立てれば！

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

Answer 2

フレックスボックスを使用できます。 FlexboxはIE 9と8では現在動作していませんが、hereのように他のすべてのブラウザで正常です。 CSSで物事を中心に更なる情報については

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

、あなたがこのガイドを確認することができます：あなたは自分の.modalクラス（あなたの.modal-コンテンツの親）に、このCSSを追加する必要が

https://css-tricks.com/centering-css-complete-guide/