在网页设计中，按钮是非常常见的一个元素。而固定按钮在页面的尾部也是比较常见的设计需求，可以帮助用户快速找到操作按钮，在页面末尾增加操作的便利性。这里我们将学习如何使用 CSS 将按钮固定在页面底部。

.footer-btn {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);}.footer {padding-bottom: 50px; /* 为按钮留出位置 */}

首先，我们需要为按钮设置固定的位置。通过设置position: fixed;让按钮不随页面滚动而移动，并通过bottom: 0;使其位于页面底部。

由于按钮在页面底部，我们可以通过设置其left: 50%;和transform: translateX(-50%);让其水平居中。通过这样的方式，按钮将会在各种屏幕大小和分辨率下表现良好。

另外，我们需要在页面底部留出足够的位置给按钮。通过在页面底部的容器元素.footer中设置padding-bottom: 50px;，我们可以为按钮腾出 50 像素的空间。

通过上述步骤，我们可以轻松地将按钮固定在页面底部，并保证在不同设备和不同尺寸的屏幕上的表现一致。使用 CSS，我们可以实现各种优秀的网页设计。