将宽度为100%的元素居中对齐

Question

我需要一些帮助来对齐一个元素。

这是我正在使用的布局：

.container {
display: block;
box-sizing: border-box;
}
.heading {
margin-bottom: 10px;
}
.file-input {
display: block;
border: 2px dashed #ddd;
padding: 10px;
width: 100%;
cursor: pointer;
}

<div class="container">
<h4 class="heading">7. Attachments</h4>
<input type="file" class="file-input">
</div>

是否可以在不更改HTML代码的情况下，将"选择文件"按钮与边框内的文本居中对齐？

我无法更改HTML代码。我只能用我现有的东西工作

编辑：我只是想补充一点，我想将边界保持在width: 100%。

Answer 1

这是我能得到的最接近的。你可能可以用网格做到这一点

.container {
display: flex;
justify-content:center;
box-sizing: border-box;
flex-wrap:wrap;
}
.heading {
margin-bottom: 10px;
width:100%;
}
.file-input {

border: 2px dashed #ddd;
padding: 10px;
padding-left:35%;
padding-right:35%;
width: 30%;
cursor: pointer;
}

<div class="container">
<h4 class="heading">7. Attachments</h4>
<input type="file" class="file-input">
</div>

Answer 2

<div class="container">
<h4 class="heading">7. Attachments</h4>
<div class="inputwrap">
<input type="file" class="file-input">
</div>
</div>
.file-input {
width: 30%;
margin: 0 auto;
border: 0;
}
.inputwrap {
width: 100%;
padding: 30px;
border: 2px dashed #ddd;
}