Vertically Center Div Content [duplicate]

Question

Possible Duplicate:
center div vertically in a % height div?

Hey all, i have a page with some content in it. I need to center the whole thing so that in large resolutions, the content is always in the middle of the page. Two things. first is, if the resolution is small, i want at the very least the content to stop when it gets to the top of the page. I tried doing top:50% height: 680 margin-top:-340px. The problem is that in a smaller resoultion the content goes flying off the page. How do i do this? The nav is in an absolute div at the top, this too has to be centered vertically. Thanks for your help all!

er

Answer 1

It's possible to vertically center a <div> within another <div> using only css and without explicitly specifying a height or a negative top margin. The one major drawback of the following technique is that { display: table; } is NOT supported in Internet Explorer < 9.

If this is your markup:

<div class="wrapper">
    <div class="content">...</div>
</div>

The CSS to get the inner <div> to be centered is:

.wrapper { display: table; }
.wrapper .content { display: table-cell; vertical-align: middle; }

This works by essentially emulating the naitive layout behavior of <table> elements.

Answer 2

try something like this:

<figure class='logo'>
<span></span>
<img class='photo'/>

and css:

.logo {
display: block
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }

.logo * {
display: inline-block;
height: 100%
vertical-align: middle; }

.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }