在 CSS 中居中 div [关闭]答案

【问题标题】：Center a div in CSS [closed]在 CSS 中居中 div [关闭]
【发布时间】：2011-01-17 20:59:12
【问题描述】：

我正在尝试在此页面上将新闻滑块（在 div 底部容器中）居中：

http://www.luukratief-design.nl/dump/parallax/index.html

我已经有text-align: center;

还是不行。

有什么建议吗？

【问题讨论】：

我投票决定将此问题作为题外话结束，因为仅链接问题且链接已失效！

标签： css html center

【解决方案1】：

text-align: center; 仅将元素的内联内容居中，而不是元素本身。

如果是block element（是div），则需要设置margin: 0 auto;，否则如果是inline element，则需要在其parenttext-align: center; /em> 元素。

margin: 0 auto; 将上下边距设置为0，将左右边距设置为auto（大小相同），以便它自动将自己置于中心。这仅适用于有问题的块元素具有已知的width（固定或相对），否则它无法确定从哪里开始和结束。

【讨论】：

你可能还必须给“div”一个明确的宽度。
是的，你确实需要给块元素一个明确的宽度，我编辑了它。
IIRC，一些旧版本的 IE 将无法识别 auto 边距值，但它们会（错误地）使用 text-align 来居中块元素，所以同时使用 if你可以。
@T. Yates：没有人使用 IE5 或更早版本（阅读：它在 IE6 中工作得非常好，这被认为是您（可能）想要支持的绝对最低要求）。
@Bak：你实际上需要text-align: center。如果你卡住了，就问一个新问题。

【解决方案2】：

text-align 不应用于使块元素居中。（IE6 除外，但这是bug）

你必须固定块的宽度，然后使用 margin: 0 auto;

#block
{
   width: 200px;
   border: 1px solid red;
   margin: 0 auto;
}

和

<div id="#block">Some text... Lorem ipsum</div>

【讨论】：

【解决方案3】：

一种方式：

<div align="center">you content</div>

更好的方法：

<div id="myDiv">you content</div>

myDIV 的 CSS：

#myDiv{
margin:0px auto;
}

【讨论】：

【解决方案4】：

如果设置了宽度，并且你放置了一个合适的 DOCTYPE，

试试这个：

 Margin-left: auto;
 Margin-right: auto;

希望对你有帮助

【讨论】：

为了让开发人员看起来更干净，请仅使用 'margin: 0 auto;'

【解决方案5】：

添加

margin:auto;

【讨论】：

【解决方案6】：

我总是用

<div align="center">Some contents......</div>

【讨论】：

我确认这适用于 Firefox(v54)、Chrome(v58) 和 Safari(v10)。

【解决方案7】：

将text-align: center 用于容器，display: inline-block 用于包装 div，display: inline 用于内容 div，以便在浏览器中水平居中未定义宽度的内容：

    <!doctype html>
    <html lang="en">
    <head>
      <style type="text/css">

    /* Use inline-block for the wrapper */
    .wrapper { display: inline-block; }

    .content { display:inline; }

    .container { text-align:center; }

    /*Media query for IE7 and under*/

    @media,
      {
      .wrapper { display:inline; }
      }
        </style>

        <title>Horizontal Centering Test</title>
    </head>

    <body>

      <div class="container">
        <div class="content">
            <div class="wrapper">
              test text
            </div>
        </div>
      </div>
    </body>
    </html>

【讨论】：

【解决方案8】：

尝试将其添加到样式中。

margin-left: auto;

【讨论】：

【解决方案9】：

试试这个：

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}

这应该使 div 在你的页脚中居中。

【讨论】：

【解决方案10】：

创建一个单行三列的表格，将左右宽度设置为 100%，瞧，中间的会自动居中

【讨论】：

这是一个有效的答案。在大多数情况下不切实际，是的。但是，仍然有效。请停止仅仅因为您“喜欢它”而对有效答案投反对票。