When resizing, div down to the bottom of the page

The page has only one photo in the center and some texts. Added a Media Query so that when the viewport is less than 700px it magnifies images, maaas to reduce my screen, it explodes ... and down to the bottom.

How to solve?

CSS:

body, html {
    height:100%;
    width: 100%;
    padding:0;
    margin:0;
    background: #181A1B;
}

 p {
  font-family: 'Open Sans Condensed', san-serif;
  font-size: 12px;
  color: #C5C5C7;
  line-height: 14px;
  margin-top: 30px;
}



.block {
  height: 100%;
  text-align: center;
  background: #181A1B;

}




.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  background: #181A1B;


}

.centered {
    display: inline-block;
    vertical-align: middle;
    background: #181A1B;
    max-width: 500px;
    /* width: 100%;  BUUUUGA*/ 

}


.contato ul{
  list-style: none;
  margin-top: 20px;
}

.contato ul li{
  margin-right: 10px;
  display: inline; 
}

.contato ul li a{
  display: inline-block;  
}


.img_sprite1 {

  width: 40px;
  height: 38px;

  background-image: url('../img/sprite.png');
  background-repeat: no-repeat;
  transition: 0.5s;
}

.img_sprite1:hover{

  background-position: 0 -40px;
  transition: 0.2s;
}


.img_sprite2 {

  width: 40px;
  height: 38px;

  background-position: -49px 0;
  background-image: url('../img/sprite.png');
  background-repeat: no-repeat;
  transition: 0.5s;

}

.img_sprite2:hover{

  background-position: -49px -40px;
  transition: 0.2s;
}

.img_sprite3 {

  width: 40px;
  height: 38px;

  background-position: -98px 0;
  background-image: url('../img/sprite.png');
  background-repeat: no-repeat;
  transition: 0.5s;
}

.img_sprite3:hover{

  background-position: -98px -40px;
  transition: 0.2s;
}


@media screen and (max-width:700px) {


        .block {
          background: #181A1B;

            }




        .block:before {
          content: '';
          display: inline-block;
          background: #181A1B;


        }

         .centered {
             border: 1px solid green;
            width: 100%; 



        } 

        .contato {
            margin-top: 40px;
        }

        .contato ul li {

            margin-right: 30px;
        }  

        .img_sprite1 {

          width: 63px;
          height: 65px;

          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;
        }

        .img_sprite1:hover{

          background-position: 0 -70px;
          transition: 0.2s;
        }

        .img_sprite2 {

          width: 63px;
          height: 65px;

          background-position: -70px 0;
          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;

        }

        .img_sprite2:hover{

          background-position: -70px -69px;
          transition: 0.2s;
        }

        .img_sprite3 {

          width: 63px;
          height: 65px;

          background-position: -140px 0;
          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;

        }

        .img_sprite3:hover{

          background-position: -140px -69px;
          transition: 0.2s;
        }

         p {
          font-family: 'Open Sans Condensed', san-serif;
          font-size: 19px;
          color: #C5C5C7;
          line-height: 22px;
          margin-top: 30px;
        }



}

HTML:

<div class="block">

    <div class="centered">
       <img src="img/img1.jpg"  id="img_logo">


     <div class="contato">
       <ul>
          <li><a href="#" target="_blank" class="img_sprite1"></a></li>
            <li><a href="#" target="_blank" class="img_sprite2"></a></li>
            <li><a href="#" target="_blank" class="img_sprite3"></a></li>
          </ul>
     </div> 



        <p> <a style="font-size:35px;"> test </a> <br> Test 2  </p>

    </div>




</div>