如何在较小的可变宽度的 div 内水平居中可变宽度的较大 div

我想达到如下效果：http://jsfiddle.net/3KJta/1/ http://jsfiddle.net/3KJta/1/

但是我的解决方案使用了known小 div 和大 div 的宽度。我需要这个来配合variable大小的 div。其用例是出现在较小的灵活尺寸元素上方的工具提示。工具提示内容未知，因此宽度可以是任何值。

到目前为止我有：

<div class="small">
    <div class="smaller"></div>
    <div class="larger"></div>
</div>

and

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div {
    border: 2px solid black;
}

.small {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 200px;
    top: 50px;
    text-align: center;
}

.smaller {
    width: 20px;
    height: 20px;
    border-color: red;
    display: inline-block;
}

.larger {
    width: 200px;
    height: 200px;
    border-color: blue;
    display: inline-block;
    margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}

如果您可以使用 css3 并且只支持现代浏览器，您可以使用transform: translateX(-50%);将较大的框居中（目前支持的浏览器 http://caniuse.com/transforms2d).

看这个例子：http://jsfiddle.net/2SQ4S/1/ http://jsfiddle.net/2SQ4S/1/