Question

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

如何将红色框放在橙色div的BOTTOM中的CENTER +中？

红色框的高度和宽度都是动态的，不同的是盒子。

（它需要适用于所有浏览器，包括IE7 + IE8）

Answer 1

HTML

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

CSS

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

Answer 2

SpaceBeers解决方案似乎很好 - 或另一种变体：

http://jsfiddle.net/yPAey/

Answer 3

要考虑红色框中的可变宽度，请在红色框宽度'position：absolute'和'bottom：0'和'width：100％'周围添加另一个包装div，然后删除位置：绝对值红色框让它以'margin：0 auto'

为中心

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

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

Answer 4

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

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

我已经将底部的一个容器（蓝色）对齐，然后将红色框放在那里。

Answer 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;
}

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

5 个答案:

http://jsfiddle.net/FQsuU/