When I resize the viewport, the image moves to the bottom of the page

Question

The site has a center image and a small text. When I resize the page, it adjusts (responsiveness). When it reaches a certain point 350-400px approximately, the div with the image and the text descends to the bottom of the page, how to solve this?

body, html {
  height:100%;
  padding:0;
  margin:0;

}
.block {
  height: 100%;
  width: 100%;
  text-align: center;
  background: black;

}


.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  
}

.centered {
  display: inline-block;
  vertical-align: middle;
  max-width: 500px; 
  background: white;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="block">
     
    <div class="centered">
    
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="img-responsive" id="img_logo">
 <p style="color: black"> <a style="font-size:35px;"> xxxxxx</a> <br><br>text text <br> address <br>  </p>      
   </div>
  </div> 

Answer 1

Remove inline-block from class

.block before:

It is creating a 100% space before the class . block and pushing the div down when the page is resized.