Как центрировать div вертикально и горизонтально с помощью флажка в верхнем углу родительского div

Question

Я занимаюсь разработкой приложения с использованием VueJS и Bootstrap.Я пытаюсь центрировать div с изображением, и в то же время в правом верхнем углу появляется метка флажка, как это.

Но когдазавис над картой, изображение немного смещается влево, например:

  .file-name-style{
    height: 26px; 
    color: #424242; 
    font-family: 'Source Sans Pro'; 
    font-size: 15px; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
    text-align: left;
    padding: 5px 15px;
  }

  .file-size-style{
    height: 26px; 
    color: #9E9E9E; 
    font-family: 'Source Sans Pro'; 
    font-size: 12px; 
    text-align: left; 
    line-height: 1px;
    padding: 10px 15px;
  }
  
  .header-rectangle {
    height: 155px; 
    background: #F5F5F5; 
    border: 1px solid #E0E0E0; 
    border-radius: 0px;
    border-bottom: none;
  }

  .footer-rectangle {  
    height: 65px; 
    background: #FAFAFA;
    border: 1px solid #E0E0E0; 
    border-radius: 0px;
    vertical-align:middle; text-align:center;
  }

<div v-for="(item, index)  in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
  <stats-card>
      <div slot="header" class="header-rectangle" >
          <!-- @contextmenu.prevent="$refs.menu.open" -->
          <div>
              <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="margin-top: 8px;float: right;margin-right: 10px;margin-left: 0px;">
                  <input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
                  <i class="form-icon">
                  </i>
              </label>
          </div>

          <div style="margin-left: 25px;">
              <img :src="item.source" style=" height: 50px; margin-top: 50px">
          </div>

      </div>
      <div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
          <!-- @contextmenu.prevent="$refs.menu.open"  -->
          <div class="row" >
              <div class="col-9"  style="display: flex;flex-direction: column;justify-content: center;">
                  <div class="file-name-style">
                      <span>{{item.name}}</span>
                  </div>
                  <div class="file-size-style" >
                      <span>{{item.size}} MB</span>
                  </div>
              </div>
              <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                  <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
                      <i class='fas fa-users' id="image"></i>
                  </div>
              </div>
          </div>
      </div>
  </stats-card>
  </div>

Как сделать так, чтобы div с изображением отображался по центру по вертикали и горизонтали с флажком, выровненным по верхнему правому углу?

I 'Я хотел бы помочь с этим.Заранее спасибо.

Answer 1

Вы можете использовать классы начальной загрузки, такие как d-flex, align-items-center, justify-content-center в div изображения, чтобы центрировать его по горизонтали и вертикали.Чтобы установить флажок в правом верхнем углу, вы должны добавить position-relative класс в header-rectangle.В метке вы должны добавить стиль как position: absolute; top: 0; right: 10px, основываясь на своем выводе, вы можете внести небольшие изменения в значения свойств top и right.

<div v-for="(item, index)  in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
  <stats-card>
      <div slot="header" class="header-rectangle position-relative" >
          <!-- @contextmenu.prevent="$refs.menu.open" -->
          <div>
              <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="position: absolute; top: 0; right: 10px">
                  <input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
                  <i class="form-icon">
                  </i>
              </label>
          </div>

          <div class="d-flex align-items-center justify-content-center">
              <img :src="item.source" style=" height: 50px;">
          </div>

      </div>
      <div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
          <!-- @contextmenu.prevent="$refs.menu.open"  -->
          <div class="row" >
              <div class="col-9"  style="display: flex;flex-direction: column;justify-content: center;">
                  <div class="file-name-style">
                      <span>{{item.name}}</span>
                  </div>
                  <div class="file-size-style" >
                      <span>{{item.size}} MB</span>
                  </div>
              </div>
              <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                  <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
                      <i class='fas fa-users' id="image"></i>
                  </div>
              </div>
          </div>
      </div>
  </stats-card>
  </div>