在 div 的中心制作一个元素，垂直和水平

Question

我有这个代码

<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>

这是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;
}

如何使#btnFileUpload 垂直和水平显示在其父项的中心？

Answer 1

首先，你必须将 #btnFileUpload 周围的 div 设置为 100% 高度，然后使用 display: flex 使其 center-aligned 像

  <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;
}

在 div 的中心制作一个元素，垂直和水平

making an element in center of div ,Vertically and Horizentally

html

css

bootstrap-4