title: Vertically align container with fixed position and dynamic height to middle of viewport?
body: <p>How do I align a container (eg social media plugins) with <strong>fixed position</strong> and <strong>dynamic height</strong> 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.</p>
  
  <p>This is what I have but it doesn't work, the container doesn't even show up for some reason:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="socialpluginscontainer"&gt;
  
        &lt;div id="socialplugins"&gt;
  
             //code for social plugins
  
        &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>