如何使用 CSS 使 div 居中？答案

【问题标题】：How to center a div with CSS?如何使用 CSS 使 div 居中？
【发布时间】：2012-10-25 05:20:36
【问题描述】：

我正在学习 HTML/CSS，到目前为止，我在 CSS 方面仍然存在困难，尤其是在定位方面。

例如，任何人都可以向我解释为什么以下不起作用？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
    #main{
        background-color : blue;   
        height : 50px;
        width : 30px;
    }
    .centerer{
        margin : 0 auto;}

    
    </style>
</head>

<body>
    <div class="centerer">
        <div id="main">
        </div>
    </div>
</body>
</html>

【问题讨论】：

感谢 ЯegDwight 编辑 :)

标签： css center centering

【解决方案1】：

Demo

现在定义你的#main ID display:inline-block 并在你的.centerer 中给text-align:center class

这样写就可以了

CSS

#main {
    background-color: blue;
    height: 50px;
    width: 30px;
  display:inline-block;
  vertical-align:top;
}
    .centerer{
        margin : 0 auto;
width:200px;
  background:red;
  text-align:center;
}

您的 html

<div class="centerer">
        <div id="main">fgasdfds fsd ds fsd
        </div>
    </div>

Demo

【讨论】：

您的代码也不起作用！它快把我逼疯了！ CSS：见过这么奇怪的语言！
@Colas 现在定义 text-align:center 就像这个演示两个 tinkerbin.com/65XQOzej
但是没有蓝色...我会说你的代码不起作用:(
是的，但我想要的是 50*30 的蓝色块在我的页面中居中，并且居中来自父级。
@Colas 如果所有这些工作示例在您在代码中尝试后都停止工作，您不认为您的代码可能很混乱起来。

【解决方案2】：

使用margin:0 auto 将使DIV 居中，但您必须提供宽度才能使其正常工作。

例如，在 CSS 中：

div {
    width: 900px;
    margin:0 auto;
}

这是更新的 HTML/CSS 代码，以便 DIV 居中对齐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#main {
    background-color: blue;
    height : 50px;
    width : 30px;
}

.centerer {
    margin : 0 auto;
    width: 30px;
}
</style>
</head>

<body>
    <div class="centerer">
        <div id="main">
    </div>
</div>

</body>
</html>

或者，您可以去掉 .centerer div，而只是通过应用相同的 CSS 使 #main div 居中 - 您已经定义了宽度，因此只需添加 margin:0 auto;。但是，如果您希望其他项目位于 .centerer 容器的中心，请保持原样。

【讨论】：

【解决方案3】：

您希望#main 位于中心，因此您必须将margin:0 auto; 提供给#main。

这是demo

HTML：

<div class="centerer">
        <div id="main"></div>
</div>

还有 CSS ：

.centerer {background-color : red;}

#main {
        background-color : blue;   
        height : 50px;
        width : 30px;
        margin : 0 auto;
    }

【讨论】：

【解决方案4】：

.centerer 居中，它具有width: auto（默认值），因此与其容器一样宽，并且看起来就像它是左对齐或右对齐一样。

如果您想将#main 居中，则必须在#main 本身上设置自动边距。

【讨论】：

是的，我知道，但我的意思是我想居中 .centerer 并且内容出现在其中！（实际上，我需要为#main 修复不同的边距）。我不明白为什么它不起作用！ .centerer 不应该以body 为中心吗？见我的另一个问题stackoverflow.com/questions/13230107/…
@Colas — 我的答案的第一个段落以中心为中心。第二段地址以centerer的内容为中心。
为什么 .centered 相对于不居中？为什么中心属性不传播给孩子？
@Colas — .centred 相对于主体居中。您只是看不到它，因为它与身体的宽度相同。如果你让一个块居中，那么它的块级子级不会自动在其中居中，因为人们想要这种布局的情况相对较少。
不，it doesn't（因此背景颜色会延伸到容器的宽度，而不仅仅是文本的宽度）。

【解决方案5】：

尝试给 centerer div 一个宽度。

【讨论】：

【解决方案6】：

您可以通过margin:auto;获得您想要的结果

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

        <div id="main">afdafdaf
        </div>

</body>
</html>

CSS

#main {
margin:auto;
  width:500px;
  height:100px;
  background:red;
  text-align:center;
}

Demo

【讨论】：

【解决方案7】：

为此，您需要给.center 一个确定的宽度，否则浏览器无法计算左右边距。以下应该有效：

.centerer{
        margin : 0 auto;
   width:100px;
}

【讨论】：

是的，确实如此。这是非常基本的。
所以这意味着我的代码在其他地方有错误，因为当我用 Chrome 打开它时，结果是一个空白页！
你确定吗？您的 div id="main" 实际上是否包含任何内容？？