Vertically Align Fixed Size Div - html

Question

I have read all the other questions on Stackoverflow related to this topic, and none seem to fix my issue.
I have a nav bar at the top of my page that is fixed to the top left corner then a div in the centre containing an image and some texts.
My content is as so:
<div class="center">
<div id="logo"> <a class="home" href="index.html"> <img class="noborder" src="images/logocat.png" alt="" /> </a>
</div>
<div id="top">
<p class="toptext">TEXT</p>
</div>
<div id="contact">
<table border="0" align="center">
<tr>
<td><a href="http://be.net/crookedcartoon"></td>
<td><p class="contact-text1"> CROOKEDCARTOON#GMAIL.COM </p>
<p class="contact-text2"> Alex: TEXT </p></td>
<td><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" />
</td>
</tr>
</table>
</div>
<div id="about">
<p class="content-text-index">TEXT</p>
</div>
</div>
The CSS for the mentioned div is:
.center {
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top:-492px;
margin-left:-257px;
padding:0px;
}
It wont centre vertically or horizontally there is no div or wrapper surrounding this div, or any conflicting css (as far as im aware) and it's becoming a pain.
Can anyone suggest a fix? I have tried the half margin/width etc idea and that is what is displayed above.

Answer 1

I notice you are using #center instead of '.center` in your CSS.
.center { /* as you have used a class in your HTML */
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top:-492px;
margin-left:-257px;
padding:0px;
}

Answer 2

ok, forget everything and just use this CSS
html, body{ height: 100%; }
.center {
height: 984px;
width: 504px;
position:absolute;
top:50%;
left:50%;
margin-top: -492px;
margin-left: -257px;
padding:0px;
}
And let me know if it's working.
Use CSS flex-box : http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
.center {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row /* works with row or column */
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can go with CSS flex-box. and for old versions of IE you need use either this jquery solution http://dipaksblogonline.blogspot.in/2011/02/div-content-vertical-align-centermiddle.html
or use the display: table; property CSS to vertically align text to middle of div

Answer 3

You can apply a ghost element to fill the 100% of the height of a parent element.
.wrap {
text-align: center;
height: 500px;
background: #d4d4d4;
}
.wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
vertical-align: middle;
width: 300px;
}
for a markup like this:
<div class="wrap">
<div class="center">...</div>
</div>
An example: http://jsfiddle.net/LayyM/