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

Question

如何对齐 window 底部的元素（与屏幕尺寸无关），但它仍保持在该位置，以便当 window 高度降低时（当用户更改了 window 大小）它仍然在那个确切的位置并且在 window ?

中不可见

我觉得这可能需要的不仅仅是 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>

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

How to align element at the bottom of screen using CSS?

html

css

position