making an element in center of div ,Vertically and Horizentally

April 9, 2022

I have this code

<div class="row">
   <div class="col-12  margin-to-top">
      <div class="form-account-label-upload ">
         <div>
            <a id="btnFileUpload" class="btn btn-gallery ml-3">Upload Files</a>
         </div>
      <div>
         <input type="file" class="form-control" accept="image/*" id="fileuploadhidden" style="display:none">
      </div>
   </div>
 </div>
</div>

and this is Css

.margin-to-top {
margin-top: 20px;
}

.form-account-label-upload {
padding: 5px;
border: 2px solid;
margin: 0px;
height: 80px;
border-color: #ececec;
border-radius: 10px;
}

.btn-gallery {
border-radius: 5px;
color: #fff;
background-color: #4269ce;
height:30px;
font-size:12px;
width:120px;
}

how can I make the #btnFileUpload appears vertically and horizentally in center of its parent?

>Solution :

First, you have to make the div that surrounding #btnFileUpload to 100% height, then use display: flex to make it center-aligned like

  <div class="row">
   <div class="col-12  margin-to-top">
      <div class="form-account-label-upload ">
         <div class="updBtn">
            <a id="btnFileUpload" class="btn btn-gallery ml-3">Upload Files</a>
         </div>
      <div>
         <input type="file" class="form-control" accept="image/*" id="fileuploadhidden" style="display:none">
      </div>
   </div>
 </div>
</div>

.updBtn{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}