Center content area between header and footer

QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.

I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.

Here is my jsfiddle: http://jsfiddle.net/misterizzo/dMu79/

    <body>
<div id="bg">
   <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
 <div id="header">
  <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
  </div>

    <div id="nav">
    <ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
    </div>

<div class="acton">
{{TEXT}}
</div>

<div id="footer">
<ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
</div>
</div>



</div>
</body>

Hopefully this is my last questions on this template i've been building. I sincerely appreciate all the help from everyone so far!

Solution

you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.

Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.

// comment // is not a valid comment in CSS, but /* comment */ is.

http://jsfiddle.net/dMu79/7/

basicly the structure is :

<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>