如何将div放在另一个div中？

Question

我遇到了问题。我的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参考解释这一切。

请查看以下链接

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - StackOverflow

更新 - 在行动@jsFiddle

Answer 2

我会尝试defini对于初学者来说，更具体的宽度。很难将已经横跨整个宽度的东西居中：

#container { 
    width: 400px; 
} 

Answer 3

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

Answer 4

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

工作demo

Answer 5

尝试

text-align: center; 

添加到您的父容器css声明。并遵循子容器：

display: inline-block; 

它必须做的伎俩。

Answer 6

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

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

Answer 7

现在只需定义

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

像这样

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

Answer 8

这里是解决方案

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

Answer 9

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

试试这个测试OK。在jsfiddle

Answer 10

现场检查可能是你想要的，因为这：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; 
} 

如何？ >>>在表格中，与中间垂直对齐的单元格将设置为垂直居中到该元素，并且text-align: center;可用作元素的水平对齐。注意到为什么#container是inline-block coz，这是行状态。任何问题？

Answer 11

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

Answer 12

大家都这样说，但我想这不会再说伤害。您需要将width设置为某个值。这里更容易理解。

http://jsfiddle.net/XUxEC/

Answer 13

会工作给予#container的DIV宽度：80％[任何宽度小于主要内容，并使其从左，右以及管理在％给予]，并给予保证金：0像素汽车; OR余量：0 auto; [两者都很好]。

Answer 14

让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 15

如果你不想设置#container的宽度只需要添加

text-align: center; 

到#main_content

Answer 16

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

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

Answer 17

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

<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 18

从技术上讲，你内心的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水平居中？”答案是（鼓卷请）：它取决于！

我不会做的各种途径与CSS居中的事情，当W3Schools的做这么好听这里完全翻版：http://www.w3schools.com/css/css_align.asp但其基本思想是，块级元素，你只需指定所需的宽度和设置左右边距为auto。

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

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

Answer 19

这将工作正常，我认为虽然你可能需要重置“顶部：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 20

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

这样的：

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

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

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

Answer 21

您可以居中浮动DIV用这个小小的代码：

#div { 
width: 200px; 
height: 200px; 
position: absolute; 
left: 50%; 
top: 50%; 

margin-top: -100px; 
margin-left: -100px; 
} 

Answer 22

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

这确实解决这个问题非常好（在所有新的浏览器进行测试），其中父div有类=“父母”和孩子div有ID =“小子”

那种风格的中心在水平方向并垂直。垂直居中只能使用复杂的技巧来完成，或者通过将父div作为表格单元来实现，这是HTML中唯一正确支持垂直对齐的元素之一。只需设置孩子的高度，边距自动和中间垂直对齐，它就可以工作。这是我知道的最简单的解决方案。

Answer 23

另一个有趣的方法：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> 

Answer 24

，使在中心一个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> 

Answer 25

我用下面的方法在几个项目

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{ 
    width: 100%; 
    height: 100%; 
    display: table; 
} 

.cellcentercontent{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 26

这是一种新的方式轻松中心你的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 27

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

#container { 
    width: 50%; 
    height: 50%; 
    margin: auto; 
    padding: 10px; 
    position: absolute; 
    border: 5px solid yellow; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}