无法将 <div> 对齐到中心答案

【问题标题】：Can't align <div> to center无法将 <div> 对齐到中心
【发布时间】：2018-09-04 21:30:02
【问题描述】：

我正在尝试将“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;
}

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

【问题讨论】：

您是否尝试过“0 auto”而不是仅将 auto 作为边距参数？
请在 jsfiddle 中显示完整代码
是的，我试过 0 auto 但也没有用...

标签： css html alignment

【解决方案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; }

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

【讨论】：

【解决方案2】：

为了在您的情况下使用margin：auto 需要为您的主要容器（HTML 和 BODY）定义宽度/高度

重要提示：HTML 和 BODY 元素都必须使用宽度/高度属性来规定

如下操作

html,body {
    background-color:#FFFFFF;
   width:100%;
    height:100%;
}

并观看此fiddle

【讨论】：

【解决方案3】：

您的 div 似乎填满了全屏宽度。因此居中对齐不会对 div 产生任何可见影响。尝试改用 span。

以下操作无效

<body style="text-align:center">
  <div>Foo</div>
</body>

以下应该可以工作

<div style="text-align:center">
  <span>Foo</span>
</body>

【讨论】：

【解决方案4】：

<div style="margin:0px auto;">sfsfsafafas</div>

使用此代码肯定会使 div 居中。

【讨论】：

【解决方案5】：

简单：

HTML

<div id="page"></div>

CSS

#page {
  width: 350px; height: 400px; border: 1px solid #000; margin: auto
}

jsFiddle example

【讨论】：

【解决方案6】：

如果您尝试水平居中，您还可以查看用于居中 a 的“左”和“右”属性。

例如，如果您的宽度是页面的 60% (width:60%)，您可以设置 (left:20%) 和 (right:20%) 可以将其居中，但这取决于您的 div被定位。（位置：绝对）或（位置：相对）。

(position:absolute) 具有上述宽度，左右应水平居中。

HTML 中还有 <center> enter code </center> 过去对我有用。

虽然我不是这方面的专家，所以我不知道在你的情况下使用什么“最佳实践”。

【讨论】：