Html 使用CSS不均匀地将div居中

我使用flexbox将一个

div

置于另一个

div

的中心。设想一个对话框窗口，在需要时在屏幕中央弹出

它工作得很好，但是如果对话框上方和下方的空间不完全相等，剩余空间的40%位于对话框上方，60%位于对话框下方，则效果会更好。由于对话框的高度随内部文本量的变化而变化，因此变得很棘手

例如，如果浏览器高度为1000px，对话框窗口高度为400px，我希望剩余的垂直空间（600px）在对话框上方为240px，下方为360px

我可以用JavaScript来实现，但我很好奇是否有一些聪明的CSS方法。我尝试在

#对话框

div

中添加下边距，但当对话框高度接近浏览器高度时，这不起作用

.modal{
            max-height:50%;
            width:400px;
            margin: 10% auto 5% auto;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            overflow-y: auto
        }
        .modal-body{
            background-color: beige;
            padding: 20px;
            line-height: 21px
        }

#对话框面板{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
}
#对话框{
宽度：350px；
}

正文

此解决方案使用了

显示：网格

，这是一项新功能，因此请务必查看并了解更多信息

这是控制顶部和底部空间的线：

网格模板行：40fr[内容开始]自动[内容结束]60fr

可以编辑代码段文本内容，以检查框是否保持居中，即使高度发生变化


#对话框面板{
显示：网格；
地点内容：中心；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
网格模板行：40fr【内容开始】自动【内容结束】60fr；
}
#对话框{
边框：1px实心；
宽度：350px；
网格区域：内容；
}

正文
使用伪元素和列方向模拟空白。只需调整pseudo元素的
flex-grow
，以控制每个元素应该占用多少可用空间。相等的flex grow将提供相等的空间：


#对话框面板{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
/*中心*/
背景：线性梯度（红色，红色）中心/100%1px无重复；
}
#对话框{
宽度：350px；
边框：1px实心；
}
#dialogBoxPanel:之前{
内容：“；
弹性生长：4；
}
#dialogBoxPanel:之后{
内容：“；
弹性增长：6；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Nunc hendrerit diam eu nisl fringilla ornare。佩伦特斯凯·阿奎姆·阿奎姆·埃吉斯塔斯·索达莱斯（Pellentesque aliquam quam et tellus egestas sodales）。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。普罗因·比本杜姆，
您可以添加垫片div并将flex grow设置为4:6的比例


#对话框面板{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
}
#对话框{
宽度：350px；
边框：1px纯黑；
}
.垫片顶部{
弹性生长：4；
}
.垫片底部{
flex grow:6；

正文
使用位置和边距的简单方法，我假设您的对话框高度始终是浏览器高度的40%

.modal{
            max-height:50%;
            width:400px;
            margin: 10% auto 5% auto;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            overflow-y: auto
        }
        .modal-body{
            background-color: beige;
            padding: 20px;
            line-height: 21px
        }

HTML


知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德有时，我们会毫不气馁地认为，这是一种罪过，应该得到动物的劳动。知识本身就是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德
是否需要外部面板覆盖整个视口？如果不需要，我将使用“水平和垂直/元素的宽度和高度未知”部分的解决方案，并修改平移百分比值。（即使您确实需要父完整视口大小[背景？]，你应该能够将两者结合起来——去掉弹性材料，剩下的就留在这里。）是的，我在外部面板上有一个调光效果，所以它需要覆盖整个视口。但是我可以在它里面添加另一个DIV，你的解决方案会很好。谢谢04FS！为了准确起见，你说的是垂直对齐，而不是居中。现在才看到@Temani Afif的答案，但它对“之后”和“之前”的效果相同您好，欢迎，下次请仔细阅读问题，它说：“对话框高度随内部文本的数量而变化。”“RaaelelcStoCtoto——现在通过最大高度来控制它，因为它没有高度，不会解决顶部和底部空间美学的问题。我将考虑使用<代码> 4FR Auto6FR。您所做的工作，但有一些溢出，因为40% + 60% +1FR将永远大于100%，并且您正在集中如此。e overlow将从顶部和底部平分：。您还将注意到，它与Expected不完全相同。我刚刚将1fr更改为auto，我宁愿将其保留为%以匹配问题值。非常感谢您指出错误！auto和1fr在您的情况下会给出相同的结果，问题是百分比的使用；
1fr=minmax（auto，1fr）
在您的情况下，由于40%+60%=100%（这就是为什么您总是会有溢出），因此没有可用空间，因此它将下降到
自动
这里有另一个提琴来说明我的观点：注意3个第一个是一样的，第三个是下降到0，最后一个是我建议的。现在我明白了，有道理。我要使用40fr和60fr，因为这两个解决方案在一天结束时是一样的。再次感谢你花时间教我！非常感谢Temani！两个解决方案都有效