Centrer verticalement un conteneur avec une position fixe et une hauteur dynamique au milieu du viewport ?

Question

Comment aligner un conteneur (par exemple des plugins de médias sociaux) avec une position fixe et une hauteur dynamique de sorte que le conteneur lui-même soit verticalement au milieu du viewport? Le conteneur lui-même est visible car j'ai une image de fond et quelques effets de bordure. Le contenu à l'intérieur du conteneur doit également être aligné verticalement.

Voici ce que j'ai mais ça ne fonctionne pas, le conteneur ne s'affiche même pas pour une raison quelconque:

#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 for social plugins

Answer 1

Pour aligner verticalement le conteneur au centre, vous pouvez le faire ainsi.

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

pour voir le contenu, consultez le fiddle