Horizontálne stred div s variabilnými rozmermi v kontajneri - css, stred, css-poloha, centrovanie

Mám div s premenlivými rozmermi, ktoré potrebujem na to, aby som dynamicky horizontálne vycentroval v jeho kontajneri. Tu je súčasná štruktúra ...

<div class="outer">
<div class="inner">Sample</div>
</div>

..."vnútorný" div je ten, ktorý bude mať výšku a šírku na základe jeho obsahu a musí byť horizontálne vycentrovaný (rovný priestor na ľavej a pravej strane) v rámci "vonkajšieho" divu, ktorý môže alebo nemusí mať pevné rozmery (takže "vnútorná" môže byť v rámci "vonkajšej" div "šírky, alebo sa môže rozliať, ale vždy sa v ňom nachádza) Tu sú štýly, ktoré mám v súčasnosti ...

.outer {
width: 10px;
margin: 0 auto;
position: relative;
}
.inner {
position: absolute;
bottom: 0;
}

... vlastnosti "vonkajšieho" fungujú dobre, aby ho sústredili do toho, čo je v ňom obsiahnuté, ale vlastnosti "vnútorného" majú zarovnané s ľavým okrajom "vonkajšieho" div.

Skúšal som niekoľko možností s negatívnymi okrajmi ahodnoty pre ľavé / pravé pre "vnútorné", ale zdalo sa, že závisia na pevných hodnotách pixlov, zatiaľ čo potrebujem rozmery, aby zostali variabilné vo vzťahu k jeho obsahu.

Upozornenie je, že "vnútorný" div musí byťabsolútna poloha, pretože musí byť pripevnená k dolnému okraju "vonkajšieho" (teda "spodku: 0"), aj keď je výška "vonkajšieho" kratšia ako vnútorná.

Tu je spustený príklad: http://jsfiddle.net/bVC3J/

Každý, kto má nejaké myšlienky o tom, ako to môžem dosiahnuť bez použitia JS? Ak nie je k dispozícii riešenie CSS, som otvorený pre JS, takže vás vítam, aby ste to navrhli ako poslednú možnosť.

odpovede:

To by mohlo urobiť prácu za vás: http://jsfiddle.net/fF3A4/1/

.outer {
width:300px;
height:300px;
display:table-cell;
background:#333;
vertical-align:bottom;
text-align:center;
}
.inner {
width:200px;
margin:0 auto;
background:#ccc;
display:inline-block;
}