blocks|key|142242|text|另一种有趣的方式：fiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|142243|CSS|142244|.container+{
+++background:+yellow;
+++width:+100%25;
+++display:+flex;
+++flex-direction:+row;
+++flex-wrap:+wrap;
+++justify-content:+center;
+++align-items:+center;
}

.centered-div+{
+++width:+80%25;
+++height:+190px;
+++margin:+10px;
+++padding:+5px;
+++background:+blue;
+++color:+white;
}|code-block|syntax|javascript|142245|HTML|142246|++++<div+class="container">
++++++++<div+class="centered-div">
++++++++++++<b>Enjoy</b>
++++++++</div>
++++</div>|142247|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/atuz910p/^0|9|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>Another interesting way: <a href="http://jsfiddle.net/atuz910p/" rel="nofollow noreferrer">fiddle</a></p>
<h3>CSS</h3>
<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>
<h3>HTML</h3>
<pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;centered-div&quot;&gt;
            &lt;b&gt;Enjoy&lt;/b&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|360047|text|你可以用下面的小代码将浮动div居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360048|#div+{
++++width:+200px;
++++height:+200px;
++++position:+absolute;
++++left:+50%25;
++++top:+50%25;
++++
++++margin-top:+-100px;
++++margin-left:+-100px;
}|code-block|syntax|javascript|360049|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can center float div with this little code:</p>
<pre class="lang-css prettyprint-override"><code>#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    
    margin-top: -100px;
    margin-left: -100px;
}
</code></pre>


blocks|key|141800|text|尝试添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141801|text-align:+center;|code-block|syntax|javascript|141802|添加到父容器CSS声明中。并将以下内容添加到子容器：|141803|display:+inline-block;|141804|它必须做到这一点。|141805|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try to add</p>
<pre class="lang-css prettyprint-override"><code>text-align: center;
</code></pre>
<p>to your parent container CSS declaration. And the following to the child container:</p>
<pre class="lang-css prettyprint-override"><code>display: inline-block;
</code></pre>
<p>It must do the trick.</p>


blocks|key|359611|text|对于初学者，我会尝试定义一个更具体的宽度。已经跨越整个宽度的东西很难居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359612|#container+{
++++width:+400px;
}|code-block|syntax|javascript|359613|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I would try defining a more specific width, for starters. It's hard to center something that already spans the entire width:</p>
<pre class="lang-css prettyprint-override"><code>#container {
    width: 400px;
}
</code></pre>


blocks|key|141973|text|对子div使用margin:0+auto;。然后，您可以在父div中居中子div。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|141974|entityMap^0|7|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use <code>margin:0 auto;</code> to the child div. Then you can center the child div inside the parent div.</p>


blocks|key|142294|text|我已经在几个项目中使用了以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|142295|https://jsfiddle.net/u3Ln0hm4/|offset|length|142296|.cellcenterparent{
++width:+100%25;
++height:+100%25;
++display:+table;
}

.cellcentercontent{
++display:+table-cell;
++vertical-align:+middle;
++text-align:+center;
}|code-block|syntax|javascript|142297|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>I have used the following method in a few projects:</p>
<p><a href="https://jsfiddle.net/u3Ln0hm4/" rel="nofollow noreferrer">https://jsfiddle.net/u3Ln0hm4/</a></p>
<pre class="lang-css prettyprint-override"><code>.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</code></pre>


blocks|key|359638|text|尝试在您的#container中获取position:relative;。向#container添加精确宽度|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|359639|#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;
}|code-block|syntax|javascript|359640|Working+demo|359641|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jhunlio/YpwMh/4/^0|5|A|I|I|12|A|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Try to get the <code>position:relative;</code> in your <code>#container</code>. Add an exact width to <code>#container</code>:</p>
<pre class="lang-css prettyprint-override"><code>#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;
}

</code></pre>
<p><a href="http://jsfiddle.net/jhunlio/YpwMh/4/" rel="nofollow noreferrer">Working demo</a></p>


blocks|key|359699|text|以下是解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359700|#main_content+{
++++background-color:+#2185C5;
++++height:+auto;
++++margin:+0+auto;
++++min-height:+500px;
++++position:+relative;
++++width:+800px;
}|code-block|syntax|javascript|359701|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is the solution:</p>
<pre class="lang-css prettyprint-override"><code>#main_content {
    background-color: #2185C5;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    position: relative;
    width: 800px;
}
</code></pre>


blocks|key|141874|text|#main_content+{
++++width:+400px;
++++margin:+0+auto;
++++min-height:+300px;
++++height:+auto;
++++background-color:+#2185C5;
++++position:+relative;
}

#container+{
++++width:+50%25;
++++height:+auto;
++++margin:+0+auto;
++++background-color:+#CCC;
++++padding:+10px;
++++position:+relative;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|141875|尝尝这个。测试正常。有一个实时检查on+jsfiddle。|unstyled|offset|length|141876|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/V3njp/^0|0|H|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>
<p>Try this. It tested OK. There is a live check <a href="http://jsfiddle.net/V3njp/" rel="nofollow noreferrer">on jsfiddle</a>.</p>


blocks|key|359791|text|也许你想这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359792|HTML|359793|<div+id="main_content">
++++<div+id="container">vertical+aligned+text<br+/>some+more+text+here
++++</div>
</div>|code-block|syntax|javascript|359794|CSS|359795|#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;
}|359796|多么?|359797|在表单元格中，垂直与中间对齐将设置为垂直居中元素，而text-align:+center;用作元素的水平对齐。|offset|length|style|CODE|359798|注意到为什么#container在内联块中，因为这在行的条件下。|359799|entityMap^0|0|0|0|0|0|0|Q|J|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@$Q|15|R|16|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>Maybe you want as this:</p>
<h3>HTML</h3>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;main_content&quot;&gt;
    &lt;div id=&quot;container&quot;&gt;vertical aligned text&lt;br /&gt;some more text here
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h3>CSS</h3>
<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>
<h3>How?</h3>
<p>In a table cell, vertical align with middle will set to vertically centered to the element and <code>text-align: center;</code> works as horizontal alignment to the element.</p>
<p>Noticed why is #container is in inline-block because this is in the condition of the row.</p>


blocks|key|142315|text|这是一种使用Flexbox+display轻松将div居中的新方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|142316|看看这个有用的小提琴：https://jsfiddle.net/5u0y5qL2/|offset|length|142317|下面是CSS：|142318|.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;
}|code-block|syntax|javascript|142319|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5u0y5qL2/^0|0|B|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Here is a new way to easily center your div using Flexbox display.</p>
<p>See this working fiddle: <a href="https://jsfiddle.net/5u0y5qL2/" rel="nofollow noreferrer">https://jsfiddle.net/5u0y5qL2/</a></p>
<p>Here is the CSS:</p>
<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>


blocks|key|141997|text|每个人都这么说，但我想再说一遍也没什么坏处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|141998|您需要将width设置为某个值。这里有一些更容易理解的东西。|offset|length|style|CODE|141999|http://jsfiddle.net/XUxEC/|142000|entityMap|0|LINK|mutability|MUTABLE|url^0|0|4|5|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|I]]]]

<p>Everyone said it, but I guess it won't hurt saying it again.</p>
<p>You need to set the <code>width</code> to some value. Here is something simpler to understand.</p>
<p><a href="http://jsfiddle.net/XUxEC/" rel="nofollow noreferrer">http://jsfiddle.net/XUxEC/</a></p>


blocks|key|142262|text|在中心创建一个div。不需要指定div的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|142263|下面是一个有效的演示：|142264|http://jsfiddle.net/6yukdmwq/|offset|length|142265|++++.container+{
++++++++width:+100%25;
++++++++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;
++++}|code-block|syntax|javascript|142266|++++<section+class="container">
++++++++<div+class="center">
++++++++++++<div+class="content">
++++++++++++++++<h1>Helllo+Center+Text</h1>
++++++++++++</div>
++++++++</div>
++++</section>|142267|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|E]]]]

<p>To make a div in center. There isn't any need to assign the width of the div.</p>
<p>A working demo is here:</p>
<p><a href="http://jsfiddle.net/6yukdmwq/" rel="nofollow noreferrer">http://jsfiddle.net/6yukdmwq/</a></p>
<pre class="lang-css prettyprint-override"><code>    .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;
    }
</code></pre>
<pre class="lang-html prettyprint-override"><code>    &lt;section class=&quot;container&quot;&gt;
        &lt;div class=&quot;center&quot;&gt;
            &lt;div class=&quot;content&quot;&gt;
                &lt;h1&gt;Helllo Center Text&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
</code></pre>


blocks|key|359632|text|这是因为您的宽度设置为自动。您必须指定宽度，才能使其明显居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|359633|你的#容器覆盖了整个#main_content的宽度。这就是为什么它看起来没有居中的原因。|359634|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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


blocks|key|141820|text|在不设置width的情况下，它将获得可以获得的最大宽度。因此，您看不到div已居中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|141821|#container
{
++++width:+50%25;
++++height:+auto;
++++margin:+auto;
++++padding:+10px;
++++position:+relative;
++++background-color:+black;++/*+Just+to+see+the+different+*/
}|code-block|syntax|javascript|141822|entityMap^0|4|5|Z|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Without setting the <code>width</code>, it will get the maximum width it can get. So you cannot see that the <code>div</code> has centered.</p>
<pre class="lang-css prettyprint-override"><code>#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}
</code></pre>


blocks|key|142029|text|以这种方式创建CSS内容...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|142030|#main_content+{
++++top:+160px;
++++left:+160px;
++++width:+auto;
++++min-height:+500px;
++++height:+auto;
++++background-color:+#2185C5;
++++position:+relative;
+}

#container+{
++++height:+auto;
++++width:+90%25;
++++margin:+0+auto;
++++background-color:+#FFF;
++++padding:+10px;
}|code-block|syntax|javascript|142031|下面是一个有效的示例：http://jsfiddle.net/golchha21/mjT7t/|offset|length|142032|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/golchha21/mjT7t/^0|0|0|B|10|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Make the CSS content this way...</p>
<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>
<p>A working example is here: <a href="http://jsfiddle.net/golchha21/mjT7t/" rel="nofollow noreferrer">http://jsfiddle.net/golchha21/mjT7t/</a></p>


blocks|key|142078|text|如果您不想为#container设置宽度，只需添加|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|142079|text-align:+center;|code-block|syntax|javascript|142080|敬#main_content。|142081|entityMap^0|6|A|0|0|1|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>If you don't want to set a width for <code>#container</code>, just add</p>
<pre class="lang-css prettyprint-override"><code>text-align: center;
</code></pre>
<p>to <code>#main_content</code>.</p>


blocks|key|359977|text|如果将width:+auto设置为块元素，则宽度将为100%25。因此，在这里设置auto值并没有多大意义。对于height也是如此，因为默认情况下，任何元素都设置为自动高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|359978|所以最后你的div#container实际上是居中的，但它只是占据了其父元素的整个宽度。你做了正确的居中，你只需要改变宽度(如果需要)，看看它是不是真的居中。如果你想居中你的#main_content，那么只需要在它上面应用margin:+0+auto;。|359979|entityMap^0|3|B|13|4|0|6|D|34|F|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>If you set <code>width: auto</code> to a block element, then the width would be 100%. So it really doesn't make much sense to have the <code>auto</code> value here. It is really the same for height, because by default any element is set to an automatic height.</p>
<p>So finally your <code>div#container</code> is actually centered, but it just occupies the whole width of its parent element. You do the centering right, and 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 <code>margin: 0 auto;</code> on it.</p>


blocks|key|360010|text|如果这是您想要的输出，请尝试此命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360011|<div+id="main_content"+>
++++<div+id="container">
++++</div>
</div>|code-block|syntax|javascript|360012|#main_content+{
++++background-color:+#2185C5;
++++margin:+0+auto;
}

#container+{
++++width:+100px;
++++height:+auto;
++++margin:+0+auto;
++++padding:+10px;
++++background:+red;
}|360013|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this one if this is the output you want:</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;main_content&quot; &gt;
    &lt;div id=&quot;container&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<pre class="lang-css prettyprint-override"><code>#main_content {
    background-color: #2185C5;
    margin: 0 auto;
}

#container {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: red;
}
</code></pre>


blocks|key|360024|text|我认为这将很好地工作，尽管您可能需要根据需要重置"top:200px;“：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|360025|#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;
}|code-block|syntax|javascript|360026|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This will work fine I think, though you might need to reset &quot;top:200px;&quot; according to your needs:</p>
<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>


blocks|key|360079|text|.parent+{
++++width:+500px;
++++height:+200px;
++++border:+2px+solid+#000;
++++display:+table-cell;
++++vertical-align:+middle;
}

#kid+{
++++width:70%25;+/*+70%25+of+the+parent+*/
++++margin:auto;
++++border:2px+solid+#F00;
++++height:+70%25;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|360080|这确实很好地解决了这个问题(在所有新浏览器中都进行了测试)，其中父div包含“parent”，而子div包含class=“id=”。|unstyled|360081|这种样式在水平和垂直方向上都居中。垂直居中只能使用复杂的技巧--或者通过使父div充当表格单元格来实现，这是HTML中仅有的支持垂直对齐的元素之一。|360082|只需设置孩子的高度，边距自动和中间垂直对齐，它就会起作用。这是我所知道的最简单的解决方案。|360083|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre class="lang-css prettyprint-override"><code>.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%;
}
</code></pre>
<p>This does solve the problem very well (tested in all new browsers), where the parent div has class=&quot;parent&quot; and the child div has id=&quot;kid&quot;.</p>
<p>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.</p>
<p>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.</p>


blocks|key|142325|text|*+{
++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%25;
++height:+50%25;
++margin:+auto;
++padding:+10px;
++position:+absolute;
++border:+5px+solid+yellow;
++top:+0;
++left:+0;
++right:+0;
++bottom:+0;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|142326|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>* {
  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;
}
</code></pre>


<p>I suppose that the <code>#container</code> will be centered within <code>#main_content</code>. However, it is not. Why isn't this working, and how can I fix it?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main_content"&gt;
  &lt;div id="container"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


How can I center a div within another div?

容器

我认为#container将以#main_content为中心。然而，事实并非如此。为什么这不起作用，我该如何修复它？​#main_content {  top: 160px;  left: 160px;  width: 800px;  min-height: 500px;  height: auto;  background-color: #2185C5;  position: relative

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

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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