vertical align a "button" - html

Question

I´ve made a transparent "button" and place it on a fullwidth background image
I use the class in an <a>
I would like the button to be centered responsively on the image. I got it done horizontally but not exactly vertically. (My idea is to make a one page type a page)
Here is the html:
<div class="container">
<div class="nav">nav area</div>
<div class="bg-image">
<a class="button-transp abs" href="#">Butt text<br>second line<br>third</a>
<img src="bg_top.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
the CSS
.abs {
position: absolute;
z-index: 2;
margin: 25% auto 0;
left: 0;
right: 0;
}
.button-transp {
display: inline-block;
min-width: 170px;
max-width: 500px;
width: 30%;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
}
I use margin: 25% auto 0; to get it something near right..

Answer 1

You wanted the button to stay center responsively to the image, which, in this case you should use background image. Then position your button to be 50% from the top, 50% from the left and pull it back -1/2 of its height to the top and -1/2 of its width to the left. Doing this to enforce the button to always stay in the center of the bg-image.
<div class="container">
<div class="nav">nav area</div>
<div class="bg-image">
<a class="button-transp abs" href="#">Butt text<br>second line<br>third</a>
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
.abs {
position: absolute;
z-index: 2;
top: 50%;
margin-top: -37px; /** the button height is 74, so pull it half to the top the make the gap top and bottom equal */
left: 50%;
margin-left: -95px; /** again, full button width / 2 */
}
.button-transp {
display: inline-block;
min-width: 170px;
max-width: 500px;
width: 30%;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
}
.bg-image {
background: url(http://www.online-image-editor.com//styles/2014/images/example_image.png) no-repeat 0 0;
width: 475px;
height: 360px;
position: relative;
}
See fiddle

Answer 2

I've abbreviated the structure but this option will work for any size button and will always center both horizontally & vertically.
CSS3 transforms are basically IE9 and up (suitably prefixed as required)
.bg-image {
height: 200px;
background: orange;
position: relative; /* positioning contexr */
}
.button-transp {
width: 30%;
white-space:nowrap;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
position: absolute;
z-index: 2;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
}
<div class="container">
<div class="bg-image">
<a class="button-transp abs" href="#">Butt text<br/>second line<br/>third</a>
</div>
</div>