HTML中file类型input无法居中的解决咨询

针对你遇到的文件输入框（type="file"）无法和其他元素一起居中的问题，这里有几个可行的解决办法：

方法1：利用Bootstrap的Flex布局类修改容器 #

直接给包含输入框的.form-group添加Flex相关类，让内部元素垂直排列并居中对齐：

<div class="form-group d-flex flex-column align-items-center">
    <label for="file">Choose file:</label>
    <input type="file" class="form-control-file file-input" name="file" id="file">
</div>

d-flex将容器设为Flex布局，flex-column让子元素垂直排列，align-items-center实现水平居中，这样标签和输入框都会居中对齐。

方法2：给文件输入框添加Bootstrap的margin类 #

Bootstrap提供了mx-auto类可以让块级元素水平居中，直接给输入框加上这个类：

<input type="file" class="form-control-file file-input mx-auto" name="file" id="file">

这个类会给元素设置margin-left: auto; margin-right: auto;，只要元素是块级或具有固定宽度，就能实现水平居中。

方法3：自定义CSS样式 #

如果上面的Bootstrap类不生效，可以自定义CSS来强制居中：

.file-input {
    display: block;
    margin: 0 auto;
}

先把输入框设为块级元素（display: block），再通过margin: 0 auto让它在父容器中水平居中。

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