Question

我查看了其他帖子，但他们并没有为我工作。我的网站（http://www.jacksewell.uk/）有一个模式，当你点击＆＃34;雇用我＆＃34;按钮。目前它不是垂直居中，而是水平居中。我希望模态在水平和垂直方向都居中。有帮助吗？谢谢：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上运行，但在其他所有浏览器上都可以正常使用here。

您只需将此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/

如何在另一个div内垂直对齐div？

2 个答案: