div垂直对齐中心与相对位置[重复]

Question

stackoverflow 上有很多关于垂直对齐的内容，但在我的情况下它不起作用。请参阅下面的代码和 CSS，如何使 img 居中...

 
.file-upload-content {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.file-upload-image {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}
.btn-verwijderen{
  position: absolute;
  top: 0px;
  right: 0px;
}
.nr-foto{
  position: absolute;
  bottom: 0px;
  right: 0px;  
}

<div class="foto_vak_25_50 border_dashed foto_upload">
    <div class="file-upload-content" id="content_foto2" >
       <img class="file-upload-image" src="#" id='image_foto2' />
       <img src="/img/prullenbak.png" class="btn-verwijderen">
       <img src="/img/nr-2.png" class="nr-foto">
    </div> 
</div>

Answer 1

添加了这些样式

body , html,.foto_vak_25_50 {
   height: 100%;
}
.file-upload-image {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body , html,.foto_vak_25_50 {
   height: 100%;
}
 
.file-upload-content {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
}
.file-upload-image {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-verwijderen{
  position: absolute;
  top: 0px;
  right: 0px;
}
.nr-foto{
  position: absolute;
  bottom: 0px;
  right: 0px;  
}

<div class="foto_vak_25_50 border_dashed foto_upload">
    <div class="file-upload-content" id="content_foto2" >
       <img class="file-upload-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjzx-JHoAz16ZUQ9fu7FUGvBvsIRn-30nSCHS64zlwZXaeqz3aZw" id='image_foto2' />
       <img src="/img/prullenbak.png" class="btn-verwijderen">
       <img src="/img/nr-2.png" class="nr-foto">
    </div> 
</div>