CSS - 垂直居中的div忽略父填充底部

时间:2017-02-22 02:06:32

标签: css

以下是我的示例:http://torjinx.me

如果单击邮件图标,则会打开一个模态。该模式已应用padding: 41px 0;。但是,如果视口的高度小于接触形式的高度,则忽略模态的padding-bottom,并且发送/重置按钮正好在视口的底部。

如何在这些按钮和视口底部之间留出一些空间?

HTML:

<div id="modal">
   <div id="contact-form">
      <form>
         <input type="text" />
         <input type="text" />
         <textarea></textarea>
   </div>
</div>

CSS:

#modal {
    padding: 41px 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.87);
    text-align: center;
    -webkit-transition: opacity 350ms, visibility 350ms;
    transition: opacity 350ms, visibility 350ms;
    overflow: auto;
    z-index: 1;
}
#contact-form {
    display: inline-block;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

3 个答案:

答案 0 :(得分:1)

这里最好的选择是从内部元素中移除hacky translateY(-50%)/top:50%内容,让flexbox为您完成工作。而是将其添加到外部元素:

#contact {
   -webkit-display: flex;
   display: flex;
   justify-content: center;
   align-items: center;
}

这将使内部元素垂直和水平居中。

答案 1 :(得分:0)

在滚动计算时,浏览器不会考虑填充。

如果您的模态是视口高度的100%且内部元素长于此值,则底部对模态元素的填充将不会在底部提供额外的空间。相反,为内部元素添加一个边距,这将向下推动您的滚动,并在底部为您提供所需的填充。

因此,如果你看一下这个例子,你可以看到内部元素的下边距给你底部的空间。如果你拿走底部边距并在模态(外部)元素上放置一些底部填充,则底部没有空间。

&#13;
&#13;
body, html { margin: 0;padding: 0; }
.modal {
   height: 90vh;
   margin: 5px auto;
   background: silver;
   overflow: scroll;
 }
 
 .inner {
    height: 150%;
    width: 75px;
    background: green;
    margin: 2em;
   }
&#13;
<div class="modal">
  <div class="inner">Hiya</div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

所以,我找到了一个黑客,让我的hacky垂直居中工作没有flexbox!我所要做的就是在#contact-form中包裹<table><tr><td>。然后我将padding: 22px 0;添加到td。据推测这是有效的,因为即使桌子超出了容器,桌子也会占用空间。