Center html input file

Question

I have a problem with placing an element in the center. This happens either only on top or somehow crooked. I need to place an input file element right in the center

#frame_2 {
    position: absolute;
    left: 20%;
    width: 60%;
    height: 100%;
    background-color: #f5f8ff;
}

#frame_files {
    position: relative;
    top: 10%;
    left: 20%;
    width: 60%;
    height: 20%;
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
}

input {
    text-align: center;
    margin: auto;
}

<div id='frame_2'>
    <div id='frame_files'>
        <input type='file' accept='image/*' multiple>
    </div>
</div>

I tried what is currently in my css. But in the end, this is what comes out: enter image description here

hi, the text beside the button is also the file input element. Maybe you can try this https://stackoverflow.com/questions/45928452/how-to-not-display-file-name-of-html5-input — BlackLotus, Mar 16 '23 at 17:37
Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Daniel Beck, Mar 16 '23 at 17:39
@DanielBeck oh, did he means to vertically centre the input? — BlackLotus, Mar 16 '23 at 17:48
@BlackLotus the question isn't 100% clear but I have to assume so, given that their given example is already horizontally centered...? — Daniel Beck, Mar 16 '23 at 19:40

score 0 · Accepted Answer · answered Mar 16 '23 at 17:45

Try flex - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.one {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="one">
  <div class="two">
    <input type="file">
  </div>
</div>

Center html input file

1 Answers1