我怎样才能在另一个div中居中？

我有一个问题。 我有这样的HTML代码：

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

像这样的CSS：

 #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; } 

我想#container将在#main_content中居中。 但是，事实并非如此。 我只是想找出原因以及如何让它居中。

Answer 1

您需要设置容器的宽度。 （ auto不起作用）

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

MDN的CSS参考解释了这一切。

看看这些链接

• 自动 – CSS参考| MDN
• 保证金 – CSS参考| MDN
• 什么是在CSS属性auto值的含义 – StackOverflow

更新 – 在行动@ jsFiddle

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水平排列元素？ 答案是（鼓滚请）： 这取决于！

当W3School在这里很好地做这件事的时候，我不会全面重复使用CSS来集中东西的方法： http : //www.w3schools.com/css/css_align.asp但是基本的想法是块级元素您只需指定所需的宽度，并将左右边距设置为auto 。

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

请注意：这个答案只适用于BLOCK级别的元素！ 要定位INLINE元素，您需要使用第一个BLOCK父项的text-align: center属性。

Answer 3

另一个有趣的方法： 小提琴

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> 

Answer 4

现在就定义你的

#main_content text-align:center并定义你的 #container display:inline-block;

像这样

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

Answer 5

你可以用这个小代码来居中浮动div：

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

Answer 6

它会使#container的div宽度：80％[任何宽度小于主要内容，并已在％，以便从左右两边pipe理]，并给予margin：0px auto; OR余量：0 auto; [两者都正常工作]。

Answer 7

我会尝试定义一个更具体的宽度，为初学者。 很难将已经跨越整个宽度的东西集中在一起：

 #container { width: 400px; } 

Answer 8

尝试添加

 text-align: center; 

到你的父容器的CSS声明。 并遵循子容器：

 display: inline-block; 

它必须做的伎俩。

Answer 9

这里是解决scheme

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

Answer 10

 #main_content { width: 400px; margin: 0 auto; min-height: 300px; height: auto; background-color: #2185C5; position: relative; } #container { width: 50%; height: auto; margin: 0 auto;background-color: #ccc; padding: 10px; position: relative; } 

试试这个testing好吧。 现场检查jsfiddle

Answer 11

可能是你想要的这个： Demo

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; } 

怎么样？ >>>在一个表格中，与中间垂直alignment的元素将被设置为垂直居中的元素和text-align: center; 作为元素的水平alignment。 注意到为什么#container是inline-block这是行状态。 任何问题？

Answer 12

试图得到的position:relative; 在#container ，将确切宽度添加到#container

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

工作演示

Answer 13

这是一种使用柔性显示轻松居中您的div的新方法。

看到这个工作小提琴： https ： //jsfiddle.net/5u0y5qL2/

这是CSS：

 .layout-row{ box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row; } .layout-align-center-center{ -webkit-box-align: center; -webkit-align-items: center; -ms-grid-row-align: center; align-items: center; -webkit-align-content: center; align-content: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } 

Answer 14

这是因为你的宽度设置为自动。 你必须指定它的宽度，以明显居中。 您的#container跨越#main_content的整个宽度。 这就是为什么它似乎不集中，

Answer 15

没有设置Width ，它将获得它可以获得的最大宽度。 所以你不能看到Div已经居中。

 #container { width: 50%; height: auto; margin: auto; padding: 10px; position: relative; background-color:black; /* Just to see the different*/ } 

Answer 16

使用margin:0 auto; 到小孩div。 然后，您可以将父div中的子div居中。

Answer 17

大家都说了，但我想这不会再说伤害。 您需要将width设置为某个值。 这里是更简单的理解。

http://jsfiddle.net/XUxEC/

Answer 18

用这种方式来制作CSS …

 #main_content { top: 160px; left: 160px; width: auto; min-height: 500px; height: auto; background-color: #2185C5; position: relative; } #container { height: auto; width: 90%; margin: 0 auto; background-color: #fff; padding: 10px; } 

在这里工作的例子 – > http://jsfiddle.net/golchha21/mjT7t/

Answer 19

如果您不想为#container设置宽度，只需添加

 text-align: center; 

到#main_content

Answer 20

如果将width: auto设置为块元素，则宽度将为100％。 所以这里的auto价值确实没什么意义。 对于高度真的是一样的，因为默认情况下任何元素都被设置为自动高度。

所以最后你的div#container实际上居中，但它只占据其父元素的整个宽度。 你做中心的权利，你只需要改变宽度（如果需要），看看它是真正居中。 如果你想中心你的#main_content然后只是应用margin: 0 auto; 在上面。

Answer 21

试试这个，如果这是你想要的输出：

 <div id="main_content" > <div id="container"> </div> </div> #main_content { background-color: #2185C5; margin: 0 auto; } #container { width: 100px; height: auto; margin: 0 auto; padding: 10px; background: red; } 

Answer 22

这将工作正常，我认为虽然你可能需要重置“顶部：200px;” 根据你的需要 –

 #main_content { top: 160px; left: 160px; width: 800px; min-height: 500px; height: auto; background-color: #2185C5; position: relative; border:2px solid #cccccc; } #container { width: 100px; height: 20px;; margin: 0 auto; padding-top: 10px; position: relative; top:200px; border:2px solid #cccccc; } 

Answer 23

您必须为要居中的div指定一个宽度。

喜欢这个：

 #container { width: 500; margin: 0 auto; padding: 10px; } 

有关这些链接的更多信息和示例：

http://www.w3schools.com/css/css_align.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

Answer 24

 .parent { width:500px; height:200px; border: 2px solid #000; display: table-cell; vertical-align: middle; } #kid { width:70%; /* 70% of the parent*/ margin:auto; border:2px solid #f00; height: 70%; } 

这确实解决了这个问题（在所有新的浏览器中testing过），其中父div有class =“parent”，子div有id =“kid”

这种风格既横向又纵向。 垂直居中只能使用复杂的技巧来完成，或者通过将父div作为表格单元来实现，这是HTML中唯一能正确支持垂直alignment的元素之一。 简单地设置孩子的高度，边缘自动和中间垂直alignment，它将工作。 这是我知道的最简单的解决scheme。

Answer 25

我在less数项目中使用了以下方法

https://jsfiddle.net/u3Ln0hm4/

 .cellcenterparent{ width: 100%; height: 100%; display: table; } .cellcentercontent{ display: table-cell; vertical-align: middle; text-align: center; } 

Answer 26

在中心做一个div。 不需要分配div的宽度。

工作演示在这里..

http://jsfiddle.net/6yukdmwq/

 .container{width:100%; height:500px;display:table;border:1px solid red;text-align:center;} .center{display:table-cell;vertical-align:middle;} .content{display:inline-block;text-align:center; border:1px solid green;} <section class="container"> <div class="center"> <div class="content"> <h1>Helllo Center Text</h1> </div> </div> </section>