我有一个父div，其中有一个子div居中。我想要的是，当我单击子div时，它只向下生长，而不是向上和向下生长。

单击之前的两个div:

单击div2:

时得到的结果

单击div2:

时要查找的结果

---

顺晟科技：

如果需要，应尝试在子容器和容器上应用设置为“”的属性。 查看https://www.w3schools.com/cssref/css3_pr_transform-origin.asp有关更多帮助！

可以将div1的高度更改为100%，以便它随div2增长，并在div1上使用填充来维护div2周围的区域。

let div2 = document.querySelector("#div2");
div2.addEventListener("click", e => {
  div2.style.height = "300px";
})

您可以通过设置位置绝对值来实现

有点笨拙，但是使用一个额外的元素就可以了。但是对于不同的大小肯定没有响应。

保持flex的问题是，当您不想要时，它会调整为居中，您希望蓝色正方形的顶部保持不变。

此代码段删除了flex，而是通过将蓝色元素从顶部和侧面移动50%，然后使用转换将其高度/宽度向后移动一半来使其居中。

它还将其设置为绝对位置，以便在展开时不影响其父级的大小。

使用CSS变量指定初始高度。然后可以设置初始的顶部位置，并保留该位置。