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

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;
}