css - 无法将 居中对齐

Question

我试图将“div”属性与页面中心对齐(水平)。问题是无论我使用什么属性，'div' 都会继续向左对齐。我要引用的“div”是网页的页面“div”，它位于“html”和“body”属性内。这是 CSS 代码:

#page{
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right:auto;

    border-color: black;
    border-style: solid;
    border-width: thin;

    overflow:auto;

    padding-bottom: 10px;
    padding-top: 0px;

    width:1200px;
    background-color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    color:black;
    font-size:12px;    
    height:700px;
}

'html', 'body' CSS 代码如下:

html,body {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

请注意，如果我删除“overflow”属性，div 将与页面中心对齐(尽管它会覆盖其顶部的菜单)但我需要“overflow”属性来自动添加滚动条如果将显示在此 div 中的页面的宽度/高度大于 CSS 中指定的宽度/高度。

Answer 1

我有一段时间没有编写任何代码，但通常在创建居中页面时:

html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }

然后对于 div:

#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }

这可能有效也可能无效，就像我说的，已经有一段时间了。