Vertically align container with fixed position and dynamic height

[windbrand]

How do I align a container (eg social media plugins) with fixed position and dynamic height 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.

This is what I have but it doesn't work, the container doesn't even show up for some reason:


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

[Beverleyh]

It's funny but I was just doing something like this earlier - 'converting' the divs to tables/table-cells should hopefully do it;
#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;
display:table;
}

#socialplugins {
text-align:center;
display:table-cell;
vertical-align:middle;
}
Reference and other possible solutions: http://css-tricks.com/vertically-center-multi-lined-text/

Something to bear in mind - social media plugins have scripts that generate their own styles/markup so that may conflict with what you're trying to do. If you try a few things and find that nothing works, even though it looks like it should, you probably need to do a bit of research on Google to try to find out the names/classes/id of any generated elements, then you can try to target those elements and use !important to override any auto-generated style rules.

[windbrand]

The container itself also needs to be in the middle of the viewport.

[Beverleyh]

http://css-tricks.com/snippets/css/center-div-with-dynamic-height/

If you need more help, please post a link to your page.