Vertical-align absolute positioned div

Question

I'm fiddling with Jquery Cycle slideshow and trying to add a couple of buttons. I can't seem to align them veritcally without top: #px; tomfoolery; I'd love to just align it to middle of the div vertically.

CSS

#slidecontainer {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 800px;
    height: 200px;
}
.slidecontrols {
    top: 50px;
    position: absolute;
    z-index: 100;
    width: 100%;
}
.slidecontrols a {
    background-color: white;
}
.slidecontrols a.next {
    position: absolute;
    right: 0;
}
.slideshow {
    width: 100%;
    height: 100%;
}
.bannered {
    height: 200px;
    width: 800px;
}

HTML

<div id="slidecontainer">
    <div class="slideshow" id="slideoptions">
        <img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
        <img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
    </div>
    <div class="slidecontrols">
        <a href="#" class="next">right</a>
        <a href="#" class="prev">left</a>
    </div>
</div>

Here's a Fiddle. Adding vertical-align: middle; to .slidecontrols does absolutely nothing.

Answer 1

Assuming the height of the controls will be 20px, you could use a top value of 50% and then a negative margin-top value of half the element's height. In this case, -10px.

Example Here

.slidecontrols {
    top: 50%;
    margin-top: -10px;
    position: absolute;
    z-index: 100;
    width: 100%;
}

Alternatively, if you need a solution for dynamic heights:

Example Here

.slidecontrols {
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
    z-index: 100;
    width: 100%;
    height:100%;
    display:table;
}
.slidecontrols a {
    display:table-cell;
    vertical-align:middle;
}

Answer 2

Here's another option if you don't want to guess or set any pixels:

.slidecontrols {
    top: 50%;
    position: absolute;
    z-index: 100;
    width: 100%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

Answer 3

Make top : 50% to slidecontrols which will align the links exactly at the center.

.slidecontrols {
    top: 50%;
    position: absolute;
    z-index: 100;
    width: 100%;
}

Another posibility if you consider the buttons has 20px height,

top: calc(50% - 10px); // 10px is half of buttons height

This will align it exactly at the center

When you have position: absolute, the vertical align will not work.