html - 可変幅の小さな div 内で、可変幅の大きな div を水平方向に中央揃えにする方法

Question

次の効果を達成したい: http://jsfiddle.net/3KJta/1/

ただし、私が持っているソリューションでは、小さな div と大きな div に既知の幅を使用しています。可変サイズの divを操作するには、これが必要です。これの使用例は、より小さな柔軟なサイズの要素の上に表示されるツールチップです。ツールチップの内容は不明であるため、幅は何でもかまいません。

これまでのところ、私は持っています:

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

と

* {
    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 */
}