Javascript 如何将列表中的最后一项垂直居中？

假设我有一些类似这样的代码：

.项目{ 宽度：300px； 高度：300px； 边框：1px实心ddd； 背景色：F3； 利润率：15px自动； } A. B C D e您可以使用类型的最后一个来选择类型的最后一个元素，然后在该类型上，设置边距底部：50vh 50%的视口高度

。奇怪的是，下面的代码片段似乎没有产生与我演示过的其他几个地方相同的结果

它垂直居中，与视口无关

完整视口演示：

短视口演示：

在这两种情况下都垂直居中

所有div已经水平居中，这将垂直居中最后一个div

：last of type CSS伪类表示一组同级元素中其类型的最后一个元素

这种方法还取决于vh或视图端口宽度。引用

vw：等于视口初始包含块高度的1%

.项目{ 宽度：300px； 高度：300px； 边框：1px实心ddd； 背景色：F3； 利润率：15px自动； } div：类型的最后一个{ 边缘底部：50vh； } A. B C D e我会尝试使用CSS:n最后一个子伪类，该伪类根据元素在一组同级元素中的位置进行匹配，从末尾开始计算

您可以在这里查看：

.项目{ 宽度：300px； 高度：300px； 边框：1px实心ddd； 背景色：F3； 利润率：15px自动； } .项目：第n个最后一个孩子1{ 文本对齐：居中； } A. B C D E

---

将最后一个子项的页边距底部设置为视图高度的一半减去项目高度的一半，然后如果最后一个子项是第一个子项，则对页边距顶部执行相同的操作，这样就可以了

.项目{ 宽度：300px； 高度：300px； 边框：1px实心ddd； 背景色：F3； 利润率：15px自动； } .项目：最后一个孩子{ 保证金底部：calc50vh-150px } .项目：第一个孩子：最后一个孩子{ 保证金上限：calc50vh-150px } A. B C D E

---

你可以这样做

.项目{ 宽度：300px； 高度：300px； 边框：1px实心ddd； 背景色：F3； 利润率：15px自动； 显示器：flex； } .项目：第n个最后一个孩子1{ 对齐项目：居中； } A. B C D E

---

是的，我知道最后一个子选择器，它可能会在这里使用，但我不知道如何使用它来影响所需的更改。@RyanPeschel我用一个例子更新了我的答案。你应该把你所有的部门都安排在一个小组里。在我发布的示例中，它们位于一个区域内，所有div都已显示为居中。每行有一个div。您需要更改代码，使a b为一行，c d为另一行，e为最后一行，然后仅使e居中-如果我理解您的要求-而不是水平居中，垂直居中。分区a到d的位置很好，我只希望最后一个分区有足够的边距底部，以便在您完全向下滚动页面时将其定位在屏幕中央。嗨，Ryan，谢谢您在删除我的答案并重新修改后回复我，希望我现在有一个很好的工作答案。@RyanPeschel我的答案解决了你的问题了吗？还是你在寻找其他的东西？这已经很快了，但是vh是指屏幕高度而不是容器高度吗？另外，这需要知道每个div的高度，对吗？我的div可以有一个动态高度。因此，您需要底部边距始终是容器高度的一半减去最后一个元素高度的一半，但两者都不是固定的，并且顶部边距类似，那么这种方法将不起作用，除非您使用javascriptWell获得它们的大小，这在任何情况下都可能足够好。这并不理想，但大多数的div都在同一高度，所以可能不会太明显。。