allineare div al centro di un altro div

[pettedemon]

Ciao a tutti!
Sto cercando di posizionare un div al centro di un altro div in modo che se allargo o stringo la pagina il div rimane comunque al centro.
Il mio div principale è

#colonna_1{
    float: left;
    width: 1800px;
    height: auto;
}

//all'interno della colonna posiziono i div principali uno sotto l'altro

#contiene_tavola1{
    float: left;
    width: 1800px;
    height: 1400px;
    background-color: #6d84fc;
    text-align: center;
}

//adesso all'interno del div principale che è all'interno della mia colonna correi posizionare un div che rimanga al centro

#contenuto_tavola{
    width: 900px;
    height: 600px;
    }

Pero' non riesco in nessuna maniera... Avete qualche suggerimento ?
Grazie!!!!

[ilsangue]

Il metodo più elegante, nel tuo caso, è:

#contenuto_tavola{
    width: 900px;
    height: 600px;
margin: 0 auto; //significa: sopra e sotto margin zero (ma puoi metterci il valore che vuoi), ai lati invece, posiziona auto
    } 

poi, se non ti serve il testo posizionato al centro dentro TUTTI il tuo contenitore padre e tutti i suoi child, togli il text-align:center; da #contiene_tavola1, poiché esso può centrare testo, link e immagini, ma non un elemento come div.

[pettedemon]

Ciao, ho provato ma non funziona... mi posiziona il div -contenuto_tavola- in alto e centrato rispetto al div superiore ma al ridimensionamento della finestra resta fisso in quella posizione... io avrei bisogno attivare una funzione in modo che sia sempre centrato anche al ridimensionamento della finestra...

Spero di essermi spiegato

[pettedemon]

Questo è il html

<div id="contenitore">


<div id="colonna_1">

<div id="contiene_tavola1">

<div id="contenuto_tavola">[img]images/skc.png[/img]</div>



</div>


<div id="contiene_tavola3">
<div id="contenuto_tavola">[img]images/skc.png[/img]</div></div>


</div>




<div id="colonna_2">
<div id="contiene_tavola2"></div>
</div>


<div id="colonna_3"></div>
<div id="colonna_4"></div>
<div id="colonna_5"></div>
<div id="colonna_6"></div>





</div> 

e questo il css usati

body{
        background-color: white;
    margin: 0;
    padding: 0;
    font-family: "Courier New", Courier, mono;
    text-align: center;
    
}

#contenitore{
    width: 10800px;
    height: auto;
}

#colonna_1{
    float: left;
    width: 1800px;
    height: auto;
    
}

#colonna_2{
    float: left;
    width: 1800px;
    height: auto;
    
}

#colonna_3{
    float: left;
    width: 1800px;
    height: auto;
    
}



#colonna_4{
    float: left;
    width: 1800px;
    height: auto;
    
}



#colonna_5{
    float: left;
    width: 1800px;
    height: auto;
    
}



#colonna_6{
    float: left;
    width: 1800px;
    height: auto;
    
}


#contiene_tavola1{
    float: left;
    width: 1800px;
    height: 1400px;
    background-color: #6d84fc;
    text-align: center;
}
    
    

#contiene_tavola2{
    float: left;
    width: 1800px;
    height: 8400px;
    background-color: #4cfeca;
}
    
    #contiene_tavola3{
    float: left;
    width: 1800px;
    height: 1400px;
    background-color: #b1ff4c;
}
    
#contenuto_tavola{

    width: 900px;
    height: 600px;

    }