Center html input file

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

>Solution :

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>

Leave a Reply