提交人脸按钮无法居中、固定至页面底部的CSS布局问题排查

「Submit Facial Image」按钮无法居中、位置异常的核心原因是样式配置错误：

• 当前.sendButton仅配置了position: absolute和硬编码的top: 588px，既没有写水平居中规则，也没有给父级容器加定位约束，按钮会直接相对于整个文档定位，既无法继承父容器.contentarea的text-align: center属性实现居中，还会因为不同设备的渲染高度差出现错位。
• 你之前编写的按钮基础样式（背景色、内边距、圆角、交互样式等）全被注释，没有实际生效。

按照「水平居中+放置在页面最底部」的需求，提供两种可直接落地的实现，按需选择即可： #

方案1：按钮固定悬浮在视口底部居中 #

按钮始终贴在浏览器可视区域的最下方，不随页面滚动移位，适合固定操作入口的场景：
直接替换原有.sendButton的样式代码：

.sendButton {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    /* 复用你之前编写的按钮基础样式 */
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
}

方案2：按钮在内容区最底部随流排布 #

按钮属于页面内容的一部分，放在摄像头、拍照预览区的最下方，随页面整体滚动：

1. 首先修改父容器.contentarea的样式，新增定位和高度相关配置：

.contentarea {
    font-size: 16px;
    font-family: Arial;
    text-align: center;
    /* 新增以下配置 */
    position: relative;
    min-height: 100vh;
    padding-bottom: 80px;
    box-sizing: border-box;
}

2. 再替换.sendButton的样式代码：

.sendButton {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    /* 按钮基础样式 */
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
}

• 禁止使用硬编码的top: xxx px给定位元素设置位置，不同设备、不同浏览器默认边距、元素渲染高度存在差异，写死固定值必然出现错位。
• 绝对/固定定位元素实现水平居中时，left: 50%配合transform: translateX(-50%)不需要提前计算元素自身宽度，适配性和兼容性最好。
• 注意区分居中作用对象：text-align: center仅能让容器内的行内内容（比如文字、图片）居中，给按钮本身加这个属性只会让按钮上的文字居中，无法让按钮自身在父容器中居中。

内容的提问来源于stack exchange，提问作者deniz