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

Question

我看過其他帖子，但它們對我不起作用。 我的網站（ http://www.jacksewell.uk/ ）具有一個模式，當您單擊“雇用我”按鈕時，該模式會逐漸消失。 當前，它不是垂直居中，而是水平居中。 我希望模式可以在水平和垂直方向上居中。 有什么幫助嗎？ 感謝：D

這是模態的標記和CSS（Sass）：

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

這可以解決問題，希望對您有所幫助！

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

Answer 2

您可以使用flexbox。 Flexbox當前無法在IE 9和8上運行，但在其他所有瀏覽器上都可以正常運行，如您在此處所見。

您只需要將此CSS添加到.modal類（.modal-content的父級）中：

.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/