Css 如何在HTML中垂直居中*injected*div？

我有一个完全居中的div。现在我将一些内容动态地注入到居中的div中。它当然保持居中，但它突然进入居中的位置，这看起来非常丑陋

是否有任何方法可以使定心平滑？我尝试设置

transition:all

，但没有效果

---

这里有一个供参考和快速测试的提琴：

您注入内容的方式是使用

display:none

-您不能

转换该属性；获取可具有动画/过渡的属性列表

我建议设置不同属性的动画，或者以不同的方式处理动态内容注入

如果愿意，可以使用jquery轻松完成这一任务，如中所示，或者使用css助手类，如中和下面所示


$（“#注入按钮”）。单击（函数（）{
$（'.injected block'）.toggleClass（'shrink'）；
});
html，正文{
身高：100%
}
身体{
文本对齐：居中；
显示器：flex；
}
.把我放在中间{
保证金：自动；
宽度：50%；
}
.注入块{
最大高度：800px；
过渡：最大高度1s；
溢出：隐藏；
}
.收缩{
最大高度：0px；
过渡：所有1；
}

中央空调plz
点击我测试！
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
我建议您在页面加载时获取要收缩的元素的高度，将其设置为元素的
max height
，然后在
0px
和
元素的初始高度之间切换
max height
属性。例如：

var i = document.querySelector(".injected-block");
var maxHeight = i.clientHeight + 'px';
i.style.maxHeight = maxHeight;

document.getElementById("injection-button").onclick = (function () {
    if (i.style.maxHeight === '0px') {
        i.style.maxHeight = maxHeight;
    } else {
        i.style.maxHeight = 0;
    }
});

然后可以使用消失元素上的
过渡：max height
处理动画，例如：

.injected-block {
    overflow: hidden;
    transition: max-height 0.2s;
}

这里有一个

编辑
因为目标是从元素不可见开始，所以您必须求助于一些黑客的东西。下面是一个函数，它将获取不可见元素，将其粘贴到屏幕外的div中，并返回其高度

var getHeight = function(el) {
    var hiddenDiv = document.getElementById('hidden');
    var clone = el.cloneNode(true);
    clone.className = '';
    clone.style.width = el.clientWidth + 'px';

    hiddenDiv.appendChild(clone);
    var height = clone.clientHeight + 'px';
    hiddenDiv.removeChild(clone);

    return height;
};

所以你会像这样使用它：

var i = document.querySelector(".injected-block");
var maxHeight = getHeight(i);
i.style.maxHeight = 0;

这使用了一个div
#不可见的
。示例CSS（需要根据您的情况进行调整）如下：

#hidden {
    position: fixed;
    top: -1000px;
    left: -1000px;
}

还有一个。干杯
 您可以使用元素的
不透明度
和
高度
来完成此操作，而不是使用CSS转换无法控制的
显示


//因为它没有在CSS中设置，所以我们需要跟踪元素的初始高度
var i=document.querySelector（“.injected block”）；
var initialHeight=window.getComputedStyle（i，null）.getPropertyValue（“高度”）；
//设置默认值
i、 style.opacity=1；
i、 style.height=初始高度；
document.getElementById（“注入按钮”）.onclick=（函数（）{
如果（i.style.opacity！=“1”）{
//当前隐藏，使其不透明并返回初始高度
i、 style.opacity=“1”；
i、 style.height=初始高度；
}否则{
//当前可见，使其缓慢不可见且0px高
i、 style.opacity=“0”；
i、 style.height=“0px”；
}
});
html，正文{
身高：100%；
}
身体{
文本对齐：居中；
显示器：flex；
}
.把我放在中间{
保证金：自动；
宽度：50%；
}
.注入块{
过渡：高度1s线性，不透明度1s缓进缓出；
溢出：隐藏；
}

中央空调plz
点击我测试！
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
移除
注入内容时，
h1
沿y轴垂直向下移动？这就是你所说的猛拉的意思吗？@Quoid要保持居中，整个外分区“居中我”都会移动。那个动作不平稳，这就是我所说的“急动”。好的，明白了。正如您所知，如果Safari，在删除注入的内容时，Center me plz不移动，我在Safari 8上。@Quoid我在Safari 9.0上，它为我移动，这是预期的行为。也许你应该试试更现代的浏览器？我还没有用浏览器特定的属性前缀Flex。我仍然考虑Safari 8现代；我在其他机器上有9个，只是指出你的方法在相对较新的浏览器上不起作用，这可能对你的方法有益。那么你有什么建议？只需动态创建一个新的DomeElement并将其添加到容器div中，就会显示出相同的行为。您可以尝试使用助手类，例如，如果您愿意使用jQuery use Nice技术，jQuery只是为了切换一个类？：p对于css类，是的，我只是使用jQuery来切换类-如果愿意，你可以使用vanilla JS-还请注意默认情况下
注入块
类上的任意
最大高度
（我只是使用了一个可能大于需要的值）-我实际上更喜欢@bowhart answer而不是我的（抓取要收缩的元素的高度）-如果您首先知道高度--我可能只会使用jQuery滑动：）是的，这会起作用，但在注入元素之前如何获得元素的高度？@Dizzy相反，您可以添加任意