html - 垂直对齐固定大小的 Div

Question

我已经阅读了 Stackoverflow 上与此主题相关的所有其他问题，但似乎没有一个可以解决我的问题。

我的页面顶部有一个固定在左上角的导航栏，然后在中心有一个包含图像和一些文本的 div。

我的内容是这样的:

<div class="center">
    <div id="logo">&nbsp;&nbsp; <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><a href="2014.html"><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" /></a>
                </td>
            </tr>
        </table>
    </div>
    <div id="about">
        <p class="content-text-index">TEXT</p>
    </div>
</div>

上述 div 的 CSS 是:

.center {
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-492px;
    margin-left:-257px;
    padding:0px;
}

它不会垂直或水平居中，没有 div 或围绕此 div 的包装器，或任何冲突的 css(据我所知)，这变得很痛苦。

任何人都可以提出修复建议吗？我已经尝试了半边距/宽度等想法，这就是上面显示的内容。

Answer 1

我注意到您在 CSS 中使用了#center 而不是“.center”。

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