How to position half of image out of the div responsive - css

Question

I would like to position the icons where the red square is. But I have tried the position: relative and position absolute but I dont understand why its not working.
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png">
<h4>Catering</h4>
The Menu
<br>
Today's Menu
<br>
Gallery
<br>
Festivities
<br>
</div>
</div>
.wrap {
position:relative;
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
position:absolute;
top:-50%;}

Answer 1

Not sure why this isn't working for you; I plugged it into a Fiddle and (while it doesn't behave the way I think you'd want) it seems to move the image up just fine. Here's a fiddle of a slightly different approach (not using position attributes; just applying a negative top margin) that might get you closer.
https://jsfiddle.net/35aohm3y/
.wrap {
margin-top:50px; /* push the wrap down a bit. You might not need this */
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
background:#666; /* added just for demonstration purposes */
margin-top:-50px; /* and push the image up a bit */
}

Answer 2

You can use a negative margin to pull the image up and out.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.options ul,
.options li {
margin: 0;
padding: 0;
list-style: none;
}
.options>div {
margin: 50px 0;
/* for demo */
}
.options .wrap {
padding: 1rem;
text-align: center;
background-color: #e9e9e9;
}
.blockico {
margin-top: -50px;
}
<div class="container-fluid">
<div class="row options">
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Restaurant</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>City Club & Garden</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Catering</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
</div>
</div>

Answer 3

update css blockico
.blockico {
position:absolute;
transform: translate(-50%,-50%);
left: 50%;
}