我怎么能把一个div放在另一个div中?

I've got an problem. I have the html code like this:

我有一个问题。我有这样的html代码:

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

The css like this:

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

I suppose that the #container will be centered within #main_content. However, it is not. I just want to find out the reason and how to make it centered.

我认为#容器将集中在#main_content中。然而,事实并非如此。我只是想找出原因以及如何使它居中。

27 个解决方案

#1

You need to set the width of the container. (auto won't work)

您需要设置容器的宽度。(汽车不工作)

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

The CSS reference by MDN explains it all.

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

Check out these links

查看这些链接

• auto - CSS reference | MDN
• 自动- CSS引用| MDN
• margin - CSS reference | MDN
• CSS引用| MDN
• What is the meaning of auto value in a CSS property - *
• 在CSS属性*中的自动值是什么意思

Update - In action @ jsFiddle

更新-在行动@ jsFiddle。

#2

Technically, your inner DIV (#container) is centered horizontally. The reason you can't tell is because with the CSS width: auto property the inner DIV is expanding to the same width as its parent.

严格地说，您的内部DIV (#container)是水平居中的。之所以不能识别，是因为使用CSS width: auto属性时，内部DIV会扩展到与其父DIV相同的宽度。

See this fiddle: http://jsfiddle.net/UZ4AE/

看到这个小提琴:http://jsfiddle.net/UZ4AE/

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

In this example, I simply set the width of #container to 50px and set the background to red so that you can see that it is centered.

在本例中，我只是将#container的宽度设置为50px，并将背景设置为红色，以便您可以看到它的中心。

I think the real question is "How do I center elements horizontally with CSS?" and the answer is (drum roll please): it depends!

我认为真正的问题是“如何用CSS水平地居中元素?”

I won't do a full rehash of the myriad ways to center things with CSS when W3Schools does it so nicely here: http://www.w3schools.com/css/css_align.asp but the basic idea is that for block level elements you simply specify the desired width and set the left and right margins to auto.

当W3Schools在这里做得如此出色时，我不会对以CSS为中心的无数方法进行彻底的重新哈希:http://www.w3schools.com/css/css_align.asp，但基本的想法是，对于块级元素，您只需指定所需的宽度，并将左右边距设置为auto。

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

Please note: This answer only applies to BLOCK level elements! To position an INLINE element, you will need to use the text-align: center property on the first BLOCK parent.

请注意:此答案仅适用于块级元素!要定位一个内联元素，您需要使用文本对齐:第一个块父块的中心属性。

#3

Another interesting way: 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>

#4

You can center float div with this little code:

您可以使用这个小代码将float div居中:

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

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

#5

Now just define your

现在只是定义你的

#main_content text-align:center and define your #container display:inline-block;

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

as like this

像这样的

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

#6

Try to add

尝试添加

text-align: center;

to your parent container css declaration. And following to child container:

到您的父容器css声明。和以下的子容器:

display: inline-block;

It must do the trick.

它一定会成功。

#7

it would work giving the #container div width:80%[any width less than the main content and have given in % so that it manages well from both left and right] and giving margin:0px auto; OR margin:0 auto; [both works fine].

它可以为#container div设置80%的宽度(任何小于主内容的宽度，并为%，以便从左到右都能很好地管理)，并提供margin:0px auto;或保证金:0汽车;都没问题。

#8

I would try defining a more specific width, for starters. It's hard to center something that already spans the entire width:

首先，我会试着定义一个更具体的宽度。很难将已经跨越整个宽度的东西居中:

#container {
  width: 400px;
}

#9

here is the solution

这是解决方案

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

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

try this tested ok. live check on jsfiddle

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

#11

May be you want as this: Demo

可能你想要这样:演示

html...

html……

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

css..

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

How? >>> In a table cell vertical align with middle will set to vertically centered to the element and text-align: center; works as horizontal alignment to the element. Noticed why is #container is in inline-block coz this is in condition of row. Any question?

如何?在表格单元格中与中间垂直对齐的>>>将设置为垂直居中到元素，文本对齐:居中;作为元素的水平对齐。注意为什么#container在inline-block中，因为这是行状态。任何问题吗?

#12

try to get the position:relative;in you #container, add exact width to #container

尝试获取位置: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;
}

working demo

演示工作

#13

Here is a new way to easily center your div using flex display.

这里有一种新的方法，可以轻松地使用flex显示将div居中。

See this working fiddle: https://jsfiddle.net/5u0y5qL2/

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

Here is the css :

这里是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

It is because your width is set to auto. You have to specify the width for it to be visibly centered. Your #container spans the whole width of the #main_content. That's why it seems not centered,

因为你的宽度设置为自动。你必须指定它的宽度，使其可见居中。您的#容器跨越#main_content的整个宽度。这就是为什么它看起来不居中，

#15

Without setting the Width it will get the maximum width it can get. So you cannot see that Div has centered.

如果不设置宽度，它将获得最大宽度。所以你看不到Div已经居中了。

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

#16

use margin:0 auto; to the child div. Then you can center the child div inside the parent div.

使用保证金:0汽车;到子div，然后可以将子div放在父div中。

#17

everyone said it but i guess it won't hurt saying again. you need to set the width to some value. here is something simpler to understand.

人人都这么说，但我想再说一次也无妨。您需要将宽度设置为某个值。这里有一些更容易理解的东西。

http://jsfiddle.net/XUxEC/

http://jsfiddle.net/XUxEC/

#18

Make the css this way...

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

Working example here -> http://jsfiddle.net/golchha21/mjT7t/

这里的工作示例—> http://jsfiddle.net/golchha21/mjT7t/

#19

if you don't wanna set a width for #container just add

如果你不想为#container设置宽度，那就添加

text-align: center; 

to #main_content

为# main_content

#20

If you set width: auto to a block element, then the width would be 100%. So it really doesn't make much sense the auto value here. Really the same for height, because by default any element is set to an automatic height.

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

So finally your div#container is actually centered but it just occupy the whole width of its parent element. You do the centering right, you need just to change the width (if needed) to see that it is really centered. If you want to center your #main_content then just apply margin: 0 auto; on it.

最后你的div#container实际上是居中的但它只占据了父元素的整个宽度。你做对定心，你只需要改变宽度(如果需要)就可以看到它是真的居中的。如果你想把你的#main_content居中，那么只需要应用边距:0 auto;在上面。

#21

try this one if this is the output you want:

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

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

#22

This will work fine i think though you might need to reset "top:200px;" according to your need--

我认为这可以正常工作，尽管你可能需要根据你的需要重新设置“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;
}

#23

You must assign a width to the div you want to center.

您必须为要居中的div分配宽度。

Like This:

是这样的:

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

More information and examples on these links:

更多有关这些连结的资料和例子:

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

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

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

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

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

This does solve the problem very well (tested in all new browsers), where the parent div has class="parent" and the child div has id="kid"

这确实很好地解决了问题(在所有新浏览器中都进行了测试)，其中父div有class="parent"，子div有id="kid"

That style centers both horizontally and vertically. Vertical center can only be done using complicated tricks--or by making the parent div function as a table-cell, which is one of the only elements in HTML that properly supports vertical alignment. Simply set the height of the kid, margin auto, and middle vertical alignment, and it will work. It's the easiest solution that I know.

该样式的中心是水平和垂直的。垂直中心只能使用复杂的技巧——或者将父div函数设置为表单元格，这是HTML中唯一支持垂直对齐的元素之一。简单地设置山羊羔的高度，边缘自动，和中间垂直对齐，它将工作。这是我知道的最简单的解。

#25

I have used the following method in few projects

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

https://jsfiddle.net/u3Ln0hm4/

https://jsfiddle.net/u3Ln0hm4/

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

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

#26

to make a div in center. no need to assign width of the div.

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

working demo Here..

工作演示。

http://jsfiddle.net/6yukdmwq/

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>

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