如何将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参考| MDN
• margin - CSS参考| MDN
• autoCSS属性中值的含义是什么- 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;
}

在这个例子中,我只需设置#containerto 的宽度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元素,您需要text-align: center在第一个BLOCK父元素上使用该属性.

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

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

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

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

Answer 5

现在只需定义你的

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

像这样

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

Answer 6

尝试添加

text-align: center;

到您的父容器css声明。然后到子容器：

display: inline-block;

它必须做到这一点。

Answer 7

用于margin:0 auto;子 div。然后您可以将子 div 置于父 div 的中心。

Answer 8

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

https://jsfiddle.net/u3Ln0hm4/

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

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