如何在可变宽度的较小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 */
}

Answer 1

如果您可以使用css3并且仅支持现代浏览器，则可以使用transform: translateX(-50%);将较大的框（currently supported browsers）居中。

请参阅此示例：http://jsfiddle.net/2SQ4S/1/

Answer 2

如果您使用和额外元素，您可以这样做：

<div class="small">
    <div class="smaller"></div>
    <div class="larger">
        <div>I'm extra</div>
    </div>
</div>

CSS

.larger {
    position:relative; 
    left:50%;
    width:8000%;
    margin-left:-4000%;
    text-align:center;
    border:none;
}
.larger div {
    width: 200px;
    height: 200px;
    border-color: blue;
    margin:auto;
}

http://jsfiddle.net/3KJta/4/

虽然这确实导致内容比页面更宽的一些问题，因此您需要在overflow:hidden的容器中全部使用它：

http://jsfiddle.net/3KJta/7/

虽然有点难看。也许有一个解决方案，你可以避免这样做。也许是一个JS解决方案，可以衡量您试图展示的内容的大小并抵消它。