Vertically align container with fixed position and dynamic height

**windbrand** · 03-15-2013, 06:02 PM

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:

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

HTML:

Code:

<div id="socialpluginscontainer">

      <div id="socialplugins">

           //code for social plugins

      </div>

</div>

**Beverleyh** · 03-15-2013, 07:19 PM

It's funny but I was just doing something like this earlier - 'converting' the divs to tables/table-cells should hopefully do it;

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;
display:table;
}

#socialplugins {
text-align:center;
display:table-cell; 
vertical-align:middle; 
}

Reference and other possible solutions: http://css-tricks.com/vertically-cen...ti-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.