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

Question

我如何在窗口底部对齐元素（与屏幕大小无关），但是它保持在该位置，以便在减小窗口高度（当用户更改窗口大小时）时，它保持在该确切位置并在窗口中看不见？

我觉得这可能不仅仅需要CSS。如果可以的话，谁能指导我正确的方向？

Answer 1

<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>

Answer 2

<style>
  .box {
    border: 1px solid gray;
    box-shadow: -9px -10px 10px -10px black;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 10vh;
    right: 10vw;
  }
</style>

<div class="box"></div>