Html 如何使用CSS对齐屏幕底部的元素？

如何对齐窗口底部的元素（与屏幕大小无关），但它仍保持在该位置，以便在窗口高度降低时（当用户更改窗口大小时），它仍保持在该位置，并且在窗口中看不见

我觉得这可能需要的不仅仅是CSS。如果是这样的话，有人能为我指引正确的方向吗？

底部中间文本
您好中间div
<div style="position: fixed; bottom: 0px; left: calc(100vw / 2 - 200px); width: 400px; text-align: center; background-color: #ff0000;">Bottom center text<br />Hello center div</div>

.盒子{
边框：1px纯色灰色；
盒影：-9px-10px 10px-10px黑色；
宽度：200px；
高度：200px；
位置：绝对位置；
底部：10vh；
右：10vw；
}

非常感谢您的回复。我刚刚插入了您的代码，但当窗口高度降低时，div元素仍保留在窗口底部，而不是消失在视野之外。。有什么办法可以修改吗？添加一些javascript，获得当前的视口高度onload，在视口更改时添加事件处理程序，用bottom:-（oHeight-cHeight）*-1px更新div元素；不要认为这可以用CSS完成。虽然你的代码可能会回答PO的问题，但你应该添加一个简短的说明，说明你做了什么以及如何解决问题。非常感谢你的回答。我刚刚插入了您的代码，但当窗口高度降低时，div元素仍保留在窗口底部，而不是消失在视野之外。。有什么办法可以修改这个吗？在JSFIDLE中，它正在发生。你用html文件试过了吗？