如何在一个div中居中另一个div？

Question

我认为#container会在#main_content中居中显示。但实际上没有居中。为什么不起作用，我该如何修复？

#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185C5;
  position: relative;
}

#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

<div id="main_content">
  <div id="container">
  </div>
</div>

- user2142709

---

尝试在你的#container中加入position:relative;。 - jhunlio

你测试在哪些浏览器上？这里有一个 jsFiddle，你的代码在最新的 Chrome 上可以正常工作：http://jsfiddle.net/mFwCp/ - gion_13

横向、纵向还是两者都要？ - icktoofay

在 一个 YouTube 视频 中展示。 - Peter Mortensen

只需将容器 div 设置为 display: flex，内部 div 设置为 margin: auto 和 position: relative。 - Masciuniria

Answer 1

您需要设置容器的width（auto无效）：

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

MDN提供的CSS参考资料包含了所有内容。

请查看以下链接：

• auto - CSS参考 | MDN
• margin - CSS参考 | MDN
• 在CSS属性中，auto值的含义是什么？- Stack Overflow

at jsFiddle上演示效果。

- ShuklaSannidhya

---

这不是解决方案，它只会使容器水平居中，但无法垂直居中！ - Jiri Vetyska

使用"justify-content: center; align-items: center;"与Flex布局相结合是另一种选择。 - Smily

但是，如果你想直接使用上述提到的解决方案，你必须显示设置 "display: flex;"。 - Goku

Answer 2

从技术上讲，您的内部DIV（#container）在水平方向上是居中的。您无法看到这一点的原因是，使用CSS width:auto属性时，内部DIV会扩展到与其父元素相同的宽度。

请查看此演示：http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

在这个例子中，我只是将#container的宽度设置为50px并将背景设置为red，以便您可以看到它被居中了。

我认为真正的问题是“如何使用CSS水平居中元素？”，答案是（鼓声响起）：it depends!

我不会详细讲述使用CSS居中的无数方法，因为W3Schools在这里做得很好：http://www.w3schools.com/css/css_align.asp但基本思想是对于块级元素，您只需指定所需宽度并将左右边距设置为auto。

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

请注意：此答案仅适用于块级元素！若要将内联元素居中，您需要在第一个块级父元素上使用text-align: center属性。

- Jeremiah

Answer 3

另一种有趣的方法：fiddle

CSS

.container {
   background: yellow;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.centered-div {
   width: 80%;
   height: 190px;
   margin: 10px;
   padding: 5px;
   background: blue;
   color: white;
}

HTML

    <div class="container">
        <div class="centered-div">
            <b>Enjoy</b>
        </div>
    </div>

- iraj jelodari

---

如果你正在使用Bootstrap，请避免定义class="container"，或者至少要明白'container'是Bootstrap的CSS定义。 - Moondog 2112

Answer 4

你可以使用以下代码使浮动的 div 居中：

#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    
    margin-top: -100px;
    margin-left: -100px;
}

- Zilberman Rafael

---

这实际上是唯一正确的解决方案。所有其他方法几乎只能将内部div水平居中。这是同时垂直居中内部div的方法。 唯一更正之处为： position: absolute; // 不是 display... - Jiri Vetyska

@PeterMortensen 我不同意这个编辑；我认为作者的意思是“中心浮动”，即以一种浮动的方式使div居中，而不是将已经分配了float属性的div居中。虽然更重要的是，这个问题的答案根本不应该被编辑。 - TylerH

Answer 5

现在只需定义您的

#main_contenttext-align:center并且定义#containerdisplay:inline-block;

就像这样：

#main_content {
    text-align: center;
}

#container{
    display: inline-block;
    vertical-align: top;
}

- Rohit Azad Malik

---

它应该将text-align: center添加到容器，并将display:inline-block添加到子div或main_content。 - d.i.joe

Answer 6

试着添加

text-align: center;

将以下CSS声明添加到父容器中。将以下声明添加到子容器中:

display: inline-block;

它必须管用。

- Arman P.

Answer 7

使用margin:0 auto;来设置子元素的样式，这样你就可以将子元素居中于父元素之内。

- Sandeep Pattanaik

Answer 8

首先，我会尝试定义一个更具体的宽度。如果已经占据了整个宽度，居中就会很困难：

#container {
    width: 400px;
}

- Jason Sears

Answer 9

也许你想要的是这个：

HTML

<div id="main_content">
    <div id="container">vertical aligned text<br />some more text here
    </div>
</div>

CSS

#main_content {
    width: 500px;
    height: 500px;
    background: #2185C5;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#container{
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    padding: 10px;
}

如何实现？

在表格单元格中，使用垂直居中可以将元素垂直居中，并且text-align:center;可以水平对齐元素。

注意为什么#container是inline-block，因为这是行的条件。

- Bhojendra Rauniyar

Answer 10

如果给#container div一个宽度为80%的值（任何小于主内容宽度的百分比都可以，这样可以从左右两侧很好地管理），并给予margin:0px auto;或margin:0 auto;（两种方式都可以）。

- Vish