Come posso centrare un div all'interno di un altro div?

Question

Ho un problema. Ho il codice HTML in questo modo:

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

il CSS in questo modo:

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

Suppongo che il #container sarà centrato all'interno #main_content. Tuttavia, non lo è. Voglio solo scoprire la ragione e come renderla centrata.

Answer 1

È necessario impostare la larghezza del contenitore. (auto non funziona)

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

Il riferimento CSS MDN spiega tutto.

Scopri questi collegamenti

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - StackOverflow

Aggiornamento - In azione @jsFiddle

Answer 2

Vorrei provare defini ng una larghezza più specifica, per i principianti. È difficile centrare qualcosa che copre già l'intera larghezza:

#container { 
    width: 400px; 
} 

Answer 3

È perché la larghezza è impostata su automatico. Devi specificare la larghezza affinché sia ​​visibilmente centrata. Il tuo #container copre l'intera larghezza del #main_content. È per questo che non sembra centrato,

Answer 4

cercare di ottenere il position:relative; in voi #container, aggiungere larghezza esatta per #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; 
} 

lavoro demo

Answer 5

tenta di aggiungere

text-align: center; 

al tuo dichiarazione css del contenitore genitore. E seguente al contenitore per bambini:

display: inline-block; 

Deve fare il trucco.

Answer 6

Senza impostare lo Width otterrà la larghezza massima che può ottenere. Quindi non puoi vedere che Div è centrato.

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

Answer 7

Ora basta definire il

#main_contenttext-align:center e definire il#containerdisplay:inline-block;

come come questo

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

Answer 8

ecco la soluzione

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

Answer 9

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

provare questo test ok. controllo in diretta su jsfiddle

Answer 10

Può essere che si desidera come questo: 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; 
} 

Come? >>> In una cella di tabella l'allineamento verticale con il centro sarà impostato verticalmente rispetto all'elemento e text-align: center; funziona come allineamento orizzontale all'elemento. Notato perché #container è in coz blocco in linea questo è in condizione di riga. Qualsiasi domanda?

Answer 11

utilizzare margin:0 auto; per div. Quindi puoi centrare il div bambino all'interno del div genitore.

Answer 12

tutti lo hanno detto ma immagino che non farà male ripetere ancora. è necessario impostare lo width su un valore. ecco qualcosa di più semplice da capire.

http://jsfiddle.net/XUxEC/

Answer 13

che avrebbe funzionato dando la larghezza #container div: 80% [qualsiasi larghezza inferiore al contenuto principale e hanno dato in% in modo che gestisce bene sia da sinistra e destra] e dando margin: 0px auto; Margine OR: 0 auto; [entrambi funzionano bene].

Answer 14

Rendere il css in questo modo ...

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

esempio Lavorare qui ->http://jsfiddle.net/golchha21/mjT7t/

Answer 15

se non si vuole impostare una larghezza di #container basta aggiungere

text-align: center; 

a #main_content

Answer 16

Se si imposta width: auto su un elemento di blocco, quindi la larghezza sarebbe al 100%. Quindi non ha molto senso il valore auto qui. Lo stesso vale per l'altezza, perché per impostazione predefinita qualsiasi elemento è impostato su un'altezza automatica.

Così finalmente il tuo div#container è effettivamente centrato ma occupa solo l'intera larghezza del suo elemento genitore.Hai centrato il centro, devi solo cambiare la larghezza (se necessario) per vedere che è veramente centrata. Se vuoi centrare il tuo #main_content, applica semplicemente margin: 0 auto; su di esso.

Answer 17

provare questo uno se questo è l'output che si desidera:

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

Answer 18

Tecnicamente, il tuo DIV interno (#container) è centrato orizzontalmente. Il motivo per cui non si può capire è che con la proprietà CSS width: auto il DIV interno si espande alla stessa larghezza del suo genitore.

Vai a questa violino: http://jsfiddle.net/UZ4AE/

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

In questo esempio, ho semplicemente impostare la larghezza di #container per 50px e impostare lo sfondo per red in modo che si può vedere che sia centrato.

Penso che la vera domanda sia "Come centrare gli elementi orizzontalmente con i CSS?" e la risposta è (rullo di tamburi per favore): dipende!

Non voglio fare un rimaneggiamento completo delle miriadi di modi dal centro le cose con i CSS quando W3Schools lo fa così bene qui: http://www.w3schools.com/css/css_align.asp ma l'idea di base è che per gli elementi a livello di blocco è sufficiente specificare la larghezza desiderata e si imposta il margini sinistro e destro a auto.

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

Si prega di notare: Questa risposta si applica solo ai BLOCCARE elementi di livello! Per posizionare un elemento INLINE, sarà necessario utilizzare la proprietà text-align: center sul primo padre BLOCK.

Answer 19

Questo funzionerà bene penso che potrebbe essere necessario ripristinare "top: 200px;" in base alle proprie esigenze:

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

Answer 20

È necessario assegnare una larghezza al div che si desidera centrare.

in questo modo:

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

Maggiori informazioni ed esempi su questi link:

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

Answer 21

È possibile centrare galleggiante div con questo piccolo codice:

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

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

Answer 22

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

Questo risolve il problema molto bene (testato in tutti i nuovi browser), dove il div genitore ha class = "padre" e il div bambino ha id = "kid"

che i centri stile sia orizzontalmente e verticalmente. Il centro verticale può essere fatto solo usando trucchi complicati o rendendo la funzione div genitore come una cella di tabella, che è uno degli unici elementi in HTML che supporta correttamente l'allineamento verticale. Basta impostare l'altezza del capretto, margine automatico e allineamento verticale medio, e funzionerà. È la soluzione più semplice che io conosca.

Answer 23

altro modo interessante: 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> 

Answer 24

per fare un div nel centro. non c'è bisogno di assegnare la larghezza del div.

demo funzionante Qui ..

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> 

Answer 25

ho usato il seguente metodo in alcuni progetti

https://jsfiddle.net/u3Ln0hm4/

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

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

Answer 26

Ecco un modo nuovo per facilmente il centro il tuo div utilizzando il display flex.

Vai a questa violino di lavoro: https://jsfiddle.net/5u0y5qL2/

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

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