Comment centrer automatiquement un élément div qui se trouve dans un autre élément div

Question

Supposons que le cas d'utilisation suivant: pour un exemple de travail regard plese à ce link

Le code HTML:

<div class="container"> 
    <div class="centerElem"> 
     the width of this div could be variable 
    </div> 
</div> 

Le css style:

.container { 
    width: 500px; /*this can also change */ 
} 
.container .centerElem{ 
    margin-right: auto /*unfortunately, it works only if I set properly the width*/ 
    margin-left: auto /*unfortunately, it works only if I set properly the width*/ 
} 

En ce moment, il fonctionne comme ceci:

 ||the width of this div could be variable|       | 

Et je voudrais faire travailler comme ça, sans connaître la largeur de l'élément div intérieur:

 |    |the width of this div could be variable|   | 

Answer 1

C'est un peu ennuyeux car le code de votre question ne correspond pas au code de votre jsFiddle.

Utilisez display: inline-block sur .subcon, combiné avec text-align: center sur .container, que vous avez déjà.

comme ceci: http://jsfiddle.net/thirtydot/euYTQ/66/

Ou avec le code dans votre question: http://jsfiddle.net/thirtydot/euYTQ/67/

Answer 2

Ajout text-align:center à la div externe semble fonctionner très bien

jsFiddle: http://jsfiddle.net/HtfZ4/