将动态框定位在中心+底部答案

【问题标题】：Position dynamic box in center + bottom将动态框定位在中心+底部
【发布时间】：2011-12-03 02:09:44
【问题描述】：

http://pastehtml.com/view/bfzerlo1m.html

如何将红色框定位在橙色 div 底部的 CENTER + 中？

红色框的高度和宽度都是动态的，并且每个框都不同..

（需要在包括IE7 + IE8在内的所有浏览器中工作）

【问题讨论】：

标签： css html cross-browser center

【解决方案1】：

HTML

<DIV class="wrapper"><div class="redbox"></div></div>

CSS

.wrapper{
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.redbox{
  margin: 0 auto;
}

【讨论】：

他不需要在包装上设置 100% 宽度吗？
包装不是橙色区域。是一个帮手把它放在底部。但他必须把位置：相对；到具有橙色背景的元素。
不是我的意思，橙色盒子已经有 position: relative 在他的例子中 - 你的包装 div 需要 100% 的宽度才能跨越橙色盒子的整个宽度，以便里面的红色盒子它可以居中。否则，包装器将仅与红色框一样大，并且位于左侧。
我很确定 div 默认会以 100% 的宽度展开，但为了它，我会改进它。
绝对定位的元素不会自动填充其父元素的宽度，它们会缩小以适应其内容，除非它们被赋予明确的宽度:)

【解决方案2】：

SpaceBeers 解决方案看起来不错 - 或其他变体：

http://jsfiddle.net/yPAey/

【讨论】：

【解决方案3】：

这是您的代码，红色框居中：

http://jsfiddle.net/spacebeers/nyndk/1/

我已将一个容器（蓝色）与底部对齐，然后将红色框居中。

【讨论】：

当然，如果您知道红框的宽度是多少，这将起作用
好点。我已经修改了示例以考虑到这一点。
是的，这就是我写的：P
@Dbugger：这就是你写的，只是你没有在包装 div 上放置 100% 的宽度 - 这就是使它工作的原因。
这是否意味着我们都赢了？ :)

【解决方案4】：

要考虑红框中的可变宽度，请在红框宽度“位置：绝对”和“底部：0”和“宽度：100%”周围添加另一个包装 div - 然后从红框让它以'margin：0 auto'居中

.wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.redbox {
    height: ?px;
    width: ?px;
    margin: 0 auto;
}

【讨论】：

【解决方案5】：

也许你可以这样做：

HTML

<div style="" class="parent">     
    <div class="child-wrap">         
        <div class="child">center me...</div>     
    </div>     
</div>

CSS：

.parent{
    width:180px;
    height:180px;
    position:relative;
    background:orange;
}
.child-wrap{
    position:absolute;
    top:50%;
    left:50%;
}
.child{
    background:red;
    top:-50%;
    margin-left:-50%;
    position: relative;
    float: left;
}

http://jsfiddle.net/FQsuU/

【讨论】：