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

【问题标题】：Vertically align container with fixed position and dynamic height to middle of viewport?将具有固定位置和动态高度的容器垂直对齐到视口的中间？
【发布时间】：2013-03-03 16:25:25
【问题描述】：

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

这是我所拥有的，但它不起作用，容器由于某种原因甚至没有出现：

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

【问题讨论】：

标签： dynamic height alignment center fixed

【解决方案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

【讨论】：