垂直居中具有可变高度和 display:none 属性的 div答案

【问题标题】：Center vertically a div with variable height and display:none property垂直居中具有可变高度和 display:none 属性的 div
【发布时间】：2016-04-30 05:59:45
【问题描述】：

我试图将一个 div 置于另一个 div 的中心。 div 具有可变高度，因为它可能包含更短或更长的文本。此外，由于 div 是一个模态窗口，因此在 css 中它具有属性 display: none 所以我不能使用 display: table-cell （我认为？）。下面是两个 div 的属性：

#page {
height: 100vh;}

.white_content {
display: none;
position: absolute;
left: 36%;
width: 28%;
height: auto;
padding: 16px;
background-color: #ffffff;
z-index: 1002;
overflow: auto;}

这是我的JSFiddle。

【问题讨论】：

你在说哪个元素？如果你看不到它，用display: none 将元素居中有什么意义？
我想用 .white_content 类将 div 居中。打开模态对话框就可以看到。
你想让.white_content相对于什么？
到ID为#page的div。我知道 .white_content 的宽度，所以水平居中没有问题。
“另外，由于 div 是一个模态窗口，在 css 中它有属性 display: none 所以我不能使用 display: table-cell” - 这使得没有任何意义。只要它根本不可见，就不需要居中。为了使其可见，您需要将display:none 替换为其他内容。

标签： css center vertical-alignment

【解决方案1】：

如果您将.white_content 更改为此它垂直居中

Fiddle demo

.white_content {
    display: block;
    position: absolute;
    left: 36%;
    width: 28%;
    height: auto;
    top: 50%;
    padding: 16px;
    background-color: #ffffff;
    z-index: 1002;
    overflow: auto;
    transform: translateY(-50%): 
}

【讨论】：

是的，但它始终可见。我希望它仅在单击链接时可见。
@nadiaeagle 是的，但我只是添加了它以显示它，只需更改回display:none
好的，我明白了！非常感谢！

【解决方案2】：

你正在使用 CSS 规则

.white_content{
 position:relative
 top:20%
}

使用

top:50%;

working fiddle

【讨论】：

如果我使用 top: 50%; 会发生这种情况 (oi63.tinypic.com/2j5e4xz.jpg) JSFiddle中的代码我没有写，所以理解起来会更容易。