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

时间：2013-03-13 03:38:00

标签： html css css3

我遇到了问题。我有这样的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中居中。但事实并非如此。我只是想找出原因以及如何使它居中。

27 个答案:

答案 0 :(得分：82)

您需要设置容器的宽度。 （auto无法工作）

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

MDN的CSS引用解释了这一切。

查看这些链接

更新 - 在行动@ jsFiddle

答案 1 :(得分：29)

从技术上讲，您的内部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水平居中元素？”答案是（请滚筒）：取决于它！

当W3Schools在这里做得很好时，我不会完全重复使用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属性。

答案 2 :(得分：15)

另一种有趣的方式：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>

答案 3 :(得分：11)

你可以使用这个小代码将float div居中：

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

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

答案 4 :(得分：8)

现在只需定义

即可

#main_content text-align:center和定义您的 #container display:inline-block;

就像这样 

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

答案 5 :(得分：4)

尝试添加

text-align: center;

到您的父容器css声明。并关注子容器：

display: inline-block;

必须这样做。

答案 6 :(得分：4)

它可以提供#container div宽度：80％[任何宽度小于主要内容并且以％表示，以便它从左右两侧管理得很好]并给出边距：0px auto; OR保证金：0自动; [两者都很好]。

答案 7 :(得分：3)

您可能想要这样： 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;
}

如何？＆gt;＆gt;＆gt;在表格单元格中，与中间垂直对齐将设置为垂直居中于元素，text-align: center;与元素水平对齐。注意到#container为什么是inline-block因为这是行的条件。有问题吗？

答案 8 :(得分：3)

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

试试这个测试好了。现场检查jsfiddle

答案 9 :(得分：3)

这是解决方案

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

答案 10 :(得分：3)

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

#container {
  width: 400px;
}

答案 11 :(得分：2)

我在几个项目中使用了以下方法

https://jsfiddle.net/u3Ln0hm4/ 

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

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

答案 12 :(得分：2)

尝试获取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

答案 13 :(得分：2)

这是一种使用flex显示轻松居中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;
}

答案 14 :(得分：1)

以这种方式制作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;
}

这里的工作示例 - ＆gt; http://jsfiddle.net/golchha21/mjT7t/

答案 15 :(得分：1)

.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具有class =“parent”而子div具有id =“kid”

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

答案 16 :(得分：1)

您必须为要居中的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

答案 17 :(得分：1)

这可以正常工作我认为你可能需要重置“top：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;
}

答案 18 :(得分：1)

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

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

答案 19 :(得分：1)

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

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

答案 20 :(得分：1)

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

text-align: center;

到#main_content

答案 21 :(得分：1)

每个人都这么说，但我想这不会再伤害了。您需要将width设置为某个值。这里有一些比较容易理解的东西。

http://jsfiddle.net/XUxEC/

答案 22 :(得分：1)

将margin:0 auto;用于子div。然后你可以将子div放在父div中。

答案 23 :(得分：1)

如果不设置Width，它将获得它可以获得的最大宽度。因此，您无法看到Div已居中。 

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

答案 24 :(得分：1)

这是因为您的宽度设置为自动。您必须指定它的宽度才能明显居中。您的#container跨越#main_content的整个宽度。这就是它似乎没有集中的原因，

答案 25 :(得分：0)

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

答案 26 :(得分：0)

* {
  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;
}
相关问题
最新问题