How do I align a container (eg social media plugins) with fixed position and dynamic height so that the container itself is vertically in the middle of the viewport? The container itself is visible as I have a background image and some border effects. The content inside the container should be vertically aligned as well.

This is what I have but it doesn't work, the container doesn't even show up for some reason:

Code:
#socialpluginscontainer {
position:fixed;
width:100px;
height:70%;
padding-left:5px;
right:10px;
background: transparent url(../pictures/pagecontentoverlay.png);
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
#socialplugins {
text-align:center;
}
HTML:

Code:
<div id="socialpluginscontainer">

      <div id="socialplugins">

           //code for social plugins

      </div>

</div>