容器内具有可变尺寸的水平居中 div

Question

我有一个尺寸可变的 div，我需要在其容器内动态水平居中。这是当前的结构...

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

...“内部” div 的高度和宽度取决于其内容，它需要在“外部” div 内水平居中（左右两侧的空间相等），它可能有也可能没有固定的尺寸（所以“内部”可能在“外部”div的宽度内，或者它可能会溢出，但总是居中）。以下是我目前拥有的样式...

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

...“外部”的属性可以很好地将其居中，但“内部”的属性使其与“外部”div 的左边缘对齐。

我尝试了一些带有负边距和左/右值的“内部”选项，但它们似乎依赖于固定的像素值，而我需要它的尺寸相对于其内容保持可变。

需要注意的是，“内部”div 需要绝对定位，因为即使“外部”的高度为比内部短。

这是一个运行示例：http://jsfiddle.net/bVC3J/

有人对我如何在不使用 JS 的情况下实现这一点有任何想法吗？如果没有 CSS 解决方案，我对 JS 持开放态度，所以欢迎您作为最后的手段提出建议。谢谢。

Answer 1

这可能适合你：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;
}