如何垂直對齊另一個div內的div？

我看了其他帖子，但他們不適合我。我的網站（http://www.jacksewell.uk/）有一個模式，當你點擊「僱用我」按鈕時會淡入。目前它不是垂直居中，而是水平居中。我希望模態能夠水平和垂直居中。任何幫助？感謝：d如何垂直對齊另一個div內的div？

這裏模態的標記和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

來源

2016-04-24 Jack Sewell

'position：absolute; top：50％; left：50％; transform：translate（-50％， - 50％）;' – jbutler483

我以那個爲目標？什麼級別？ @ jbutler483 –

'.modal-content'應該這樣做。 – jbutler483

這將這樣的伎倆，希望這可以幫助！

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

來源

2016-04-24 17:01:46 Aakash

謝謝。我的模態不是以兩個軸爲中心。：D –

可能會更好''絕對'定位分裂國際海事組織。 – jbutler483

這是我最喜歡的方式來做到這一點，在IE9中工作正常，但不是8，以防萬一。 –

您可以使用flexbox。 Flexbox目前不適用於IE 9和8，但在其他所有瀏覽器上都可以正常使用，您可以看到here。

你只需要這個CSS添加到您的.modal類（您.modal內容的父）：

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

欲瞭解更多信息，與CSS爲中心的東西，你可以檢查此指南：https://css-tricks.com/centering-css-complete-guide/

來源

2016-04-24 17:04:39

如何垂直對齊另一個div內的div？

回答

相關問題