Div垂直对齐中心与相对位置

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;