[CSS] Vertically align an image inside a div with responsive height 在DIV中圖片垂直置中

<style>
.container {
  height: 300px;
  text-align: center;  
  font: 0/0 a;       
  background-color:#999;  
  }
.container:before {    
  content: ' ';
  display: inline-block;
  vertical-align: middle;  
  height: 100%;
  }
#caseImage {
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 Arial sans-serif; 
  width:100%;
  }
</style>

<div class="container" >
  <img src="image.jpg" id="caseImage" style=" margin:auto; " />
</div>