html - 如何垂直对齐另一个 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(萨斯):

.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%);
}