Создание элемента в центре div, по вертикали и по горизонтали

у меня есть этот код

<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 отображался вертикально и горизонтально в центре его родителя?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, вы должны сделать div, который окружает #btnFileUpload, высотой 100%, а затем использовать display: flex, чтобы сделать его выровненным по центру, например

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

Другие вопросы по теме