将具有固定位置和动态高度的容器垂直对齐到视口的中间位置？

Question

如何将容器（例如社交媒体插件）与固定位置和动态高度对齐，以便容器本身垂直位于视口中间？容器本身是可见的，因为我有一个背景图像和一些边框效果。容器内的内容也应该垂直对齐。

这是我有什么，但它不工作，容器甚至不出现由于某些原因：

#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：

<div id="socialpluginscontainer"> 

     <div id="socialplugins"> 

      //code for social plugins 

     </div> 

</div> 

Answer 1

垂直于中心对齐容器你可以这样做。

#socialpluginscontainer { 
    position:fixed; 
    width:100px; 
    height:70%; 
    padding-left:5px; 
    right:10px; 

    top: 0; 
    bottom: 0; 
    margin: auto; 

    background: tomato; 
    -moz-box-shadow:0px 0px 4px #000 inset; 
    -webkit-box-shadow:0px 0px 4px #000 inset; 
    box-shadow:0px 0px 4px #000 inset; 
} 

内容看fiddle