Wie kann ich ein Div innerhalb eines anderen Div zentrieren?

Technisch gesehen ist Ihr innerer DIV (#container) horizontal zentriert. Der Grund, den Sie nicht sagen können, ist, dass mit der CSS-Eigenschaft width: auto die innere DIV auf die gleiche Breite wie ihr übergeordnetes Element erweitert wird. 

Siehe diese Geige: http://jsfiddle.net/UZ4AE/

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

In diesem Beispiel stelle ich einfach die Breite von #container auf 50px und den Hintergrund auf red ein, damit Sie sehen, dass er zentriert ist.

Ich denke, die eigentliche Frage lautet: "Wie zentriere ich Elemente horizontal mit CSS?" und die Antwort ist (Trommelwirbel bitte): es kommt darauf an!

Ich werde die unzähligen Möglichkeiten, Dinge mit CSS zu zentrieren, nicht ganz wiederholen, wenn W3Schools es hier so schön macht: http://www.w3schools.com/css/css_align.asp , aber die Grundidee ist die Für Elemente auf Blockebene geben Sie einfach die gewünschte Breite an und setzen Sie den linken und rechten Rand auf auto.

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

Bitte beachten Sie: Diese Antwort gilt nur für Elemente der BLOCK-Ebene! Um ein INLINE-Element zu positionieren, müssen Sie die text-align: center-Eigenschaft des ersten übergeordneten BLOCK-Elements verwenden.

Ein anderer interessanter Weg: Geige

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>

Sie können Float div mit diesem kleinen Code zentrieren:

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

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

Nun definieren Sie einfach Ihre 

#main_contenttext-align:center und definieren Sie Ihren #containerdisplay:inline-block; 

so wie das  

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

es würde funktionieren, wenn die Breite des #container div gegeben würde: 80% [jede Breite ist geringer als der Hauptinhalt und in% angegeben, damit sie sowohl von links als auch von rechts gut auskommt] und einen Rand: 0px auto; OR margin: 0 auto; [beide funktionieren gut]. 

Versuchen Sie hinzuzufügen

text-align: center;

an Ihre übergeordnete Container-CSS-Deklaration. Und folgenden untergeordneten Container:

display: inline-block;

Es muss den Trick tun.

Ich würde versuchen, eine spezifischere Breite für Anfänger zu definieren. Es ist schwer etwas zu zentrieren, das sich bereits über die gesamte Breite erstreckt:

#container {
  width: 400px;
}

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

probiere dies getestet ok. Live-Check auf jsfiddle

hier ist die Lösung 

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

Möglicherweise möchten Sie Folgendes: 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;
}

Wie? >>> In einer Tabellenzelle wird die vertikale Ausrichtung mit der Mitte auf das Element vertikal zentriert gesetzt, und text-align: center; fungiert als horizontale Ausrichtung des Elements. Es wurde festgestellt, warum sich #container im Inline-Block befindet. Irgendeine Frage?

versuchen Sie, den position:relative;in Ihnen #container zu bekommen, fügen Sie #container die genaue Breite hinzu.

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

arbeiten Demo

Hier ist eine neue Möglichkeit, Ihr Div einfach mit Hilfe der Flex-Anzeige zu zentrieren.

Sehen Sie sich diese Arbeitsgeige an: https://jsfiddle.net/5u0y5qL2/

Hier ist die 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;
}

Ich habe in einigen Projekten die folgende Methode verwendet

https://jsfiddle.net/u3Ln0hm4/

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

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

Dies liegt daran, dass Ihre Breite auf automatisch gesetzt ist. Sie müssen die Breite angeben, damit es sichtbar zentriert wird. Ihr #container erstreckt sich über die gesamte Breite des #main_content. Deshalb scheint es nicht zentriert zu sein,

Das wird gut funktionieren, denke ich, obwohl Sie "top: 200px" möglicherweise zurücksetzen müssen. je nach Bedarf--

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

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

Dies löst das Problem sehr gut (getestet in allen neuen Browsern), wobei das übergeordnete div die Klasse = "parent" und das untergeordnete div die ID = "kid" hat.

Dieser Stil zentriert sich sowohl horizontal als auch vertikal. Vertikales Zentrum kann nur mit komplizierten Tricks ausgeführt werden - oder indem die übergeordnete div-Funktion als Tabellenzelle ausgeführt wird. Dies ist eines der wenigen Elemente in HTML, das die vertikale Ausrichtung ordnungsgemäß unterstützt. Stellen Sie einfach die Höhe des Kindes, die Randmarge und die mittlere vertikale Ausrichtung ein, und es funktioniert. Es ist die einfachste Lösung, die ich kenne.

verwenden Sie margin:0 auto; für das untergeordnete div. Dann können Sie das untergeordnete div innerhalb des übergeordneten div zentrieren.

Wenn Sie width: auto für ein Blockelement festlegen, beträgt die Breite 100%. Daher macht der Wert von auto hier wirklich keinen Sinn. Wirklich das Gleiche für die Höhe, da standardmäßig jedes Element auf eine automatische Höhe eingestellt ist.

Schließlich ist Ihr div#container tatsächlich zentriert, nimmt aber nur die gesamte Breite des übergeordneten Elements ein. Wenn Sie die Zentrierung richtig ausführen, müssen Sie nur die Breite ändern (falls erforderlich), um zu sehen, dass sie wirklich zentriert ist. Wenn Sie Ihren #main_content zentrieren möchten, wenden Sie einfach margin: 0 auto; darauf an.

Machen Sie die CSS auf diese Weise ...

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

Arbeitsbeispiel hier -> http://jsfiddle.net/golchha21/mjT7t/

jeder sagte es, aber ich denke, es wird nicht schaden, wenn man es noch einmal sagt. Sie müssen die width auf einen Wert setzen. hier ist etwas einfacher zu verstehen.

http://jsfiddle.net/XUxEC/

Ohne die Einstellung der Variablen Width erhält sie die maximale Breite, die sie erhalten kann. Sie können also nicht sehen, dass Div zentriert ist. 

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

probieren Sie diese Option aus, wenn dies die gewünschte Ausgabe ist:

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

Sie müssen dem Div, das Sie zentrieren möchten, eine Breite zuweisen.

So was:

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

Weitere Informationen und Beispiele zu diesen Links:

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

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

wenn Sie keine Breite für #container festlegen möchten, fügen Sie einfach hinzu

text-align: center; 

zu #Hauptinhalt 

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

ein Div in der Mitte machen. es ist nicht notwendig, die Breite des div zuzuweisen.

arbeitsdemo hier .. 

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>