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
.
.slidecontrols {
top: 50%;
margin-top: -10px;
position: absolute;
z-index: 100;
width: 100%;
}
Alternatively, if you need a solution for dynamic heights:
.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;
}