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

以下是我的例子：

如果单击邮件图标，将打开一个模式。模态具有

填充：41px 0应用于它。但是，如果视口的高度小于联系人表单的高度，则会忽略模式的
填充底部
，并且发送/重置按钮正好位于视口底部

如何在这些按钮和视口底部之间获得一些空间

HTML:

在滚动计算时，浏览器不考虑填充

如果模态是视口高度的100%，且内部元素比视口高度长，则在模态元素底部填充将不会在底部提供额外的空间。取而代之的是，在内部元素中添加一个边距，这将向下推动您的滚动，并在底部提供所需的填充

所以，如果你看这个例子，你会发现内部元素的底部边距给了你底部的空间。如果去掉底部边距并在模态（外部）元素上添加一些底部填充，那么底部就没有空间了


body，html{margin:0；padding:0；}
.莫代尔{
高度：90vh；
保证金：5px自动；
背景：银；
溢出：滚动；
}
.内部{
身高：150%；
宽度：75px；
背景：绿色；
边缘：2米；
}

你好
您在这里的最佳选择是删除内部元素中的hacky
translateY（-50%）/top:50%
内容，让flexbox为您完成工作。将其添加到外部元素：

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

这将使内部元素在垂直和水平方向上居中。
因此，我找到了一种方法，可以在没有flexbox的情况下使我已经粗糙的垂直居中工作！我所要做的就是在
中包装
#联系人表单
。然后我添加了
padding:22px0至
td
。这大概是因为即使表格超出其容器，也会占用空间。
填充底部的
不会被忽略。发生的情况是表单中的元素溢出了容器。将
overflow:auto
添加到
#联系人表单
。在此处发布相关HTML/CSS。不要只是链接到你的网站。@Michael_B我试过了，但它在联系人表单旁边添加了一个新的滚动条，看起来很傻！哎呀。你以前做过网页设计吗？如果视口高度的内容太多，你认为会发生什么？@JakeParis不，不会。我正在使用这种在容器中垂直居中内容的方法：我已经多次使用它，没有问题，但这似乎是一种独特的情况。谢谢，我已经尝试过，但没有任何区别（嗯，我刚在你的网站上做了，它似乎解决了这个问题。真的，所以你在#content form元素中添加了
margin bottom:140px
？是的，但我使用了40px。不过你已经了解了一些东西。正如@Michael#B所指出的，
联系人表单
容器并没有扩展到适合它的内容。添加140px margin使它只是扩展而已。）“torjinx问题的一部分是
#contact form
元素上的
最大高度：100%
。去掉它，你可以看到外部元素现在完全围绕着它的子元素。是的，但如果我去掉它，垂直居中就不再起作用了。”（当视口比
#联系人表单
短时）。谢谢你，我真的很想在这里使用flexbox，但我也更愿意做一些垂直以旧浏览器为中心的东西。大多数情况下，我只是想知道它是否可以做到。如果不能做到，我目前拥有的将是后备方案，我将使用flexbox。我有点理解，但flexbox现在相当标准：你有多少旧浏览器我是否需要支持？这取决于我为谁做网站。在这种情况下，这可能并不重要，但在我的一些合同中确实如此。这里的顶级答案很好地解释了我的意思：尽管如此，我似乎无法做出比我拥有的更好的回退。如果是这样的话，你的答案将是我选择的答案。：）当然，我明白了。请记住，Reddit post已经有一年的历史了，在网页设计中已经有一百万年的历史了。
#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%);
}

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