如何实现input type="file"元素内文本的响应式居中对齐？

你的文件输入框文本无法真正居中且不支持响应式显示，核心问题在于固定宽度、不对称内边距，以及伪元素未设置正确的居中规则。以下是针对性修改方案：

关键调整方向 #

• 替换固定宽度为响应式宽度，确保输入框适配不同屏幕
• 调整内边距为左右对称，消除文本偏移
• 修正伪元素的居中逻辑，实现跨屏幕自适应居中

修改后的完整CSS代码 #

#profile_video_container {
    position: relative;
    /* 可选：限制容器最大宽度，避免大屏下输入框过宽 */
    max-width: 520px;
    margin: 0 auto;
}

#profile_video_container header {
    text-align: left;
    color: #443f3f;
}

#profile_video_container input {
    border: 0 solid #92b0b3;
    background: #f1f1f1;
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    /* 左右对称内边距，移除左侧固定偏移值 */
    padding: 80px 20px 100px;
    text-align: center;
    /* 响应式宽度：占满父容器 */
    width: 100%;
    box-sizing: border-box;
    /* 可选：设置最小宽度，避免小屏下输入框过窄 */
    min-width: 280px;
}

#profile_video_container input:hover {
    background: #ddd;
}

#profile_video_container:before {
    position: absolute;
    bottom: 80px;
    /* 绝对定位水平居中核心：左移50%后反向平移自身宽度的50% */
    left: 50%;
    transform: translateX(-50%);
    content: " (or) Drag and Drop bio video here. ";
    color: #3f8188;
    font-weight: 900;
}

效果说明 #

1. 输入框会自适应父容器宽度，最大不超过520px，小屏自动收缩；box-sizing: border-box确保内边距不会导致容器溢出
2. 对称的左右内边距让输入框内的默认文本真正居中，不再出现偏移
3. 伪元素通过left:50%+transform:translateX(-50%)实现水平居中，无论屏幕尺寸如何都能保持在输入框正下方

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