中心绝对div内/外相对div

时间:2014-02-26 14:25:10

标签: javascript jquery css positioning

是否可以使用CSS或jQuery将相对div内部或外部的绝对div居中,如果你不知道相对div女巫的宽度在这种情况下是两者的父元素。

通常我会做类似的事情:

.child {
position: absolute;
top: 100%;
left: -50px;
width: 200px;
height: 300px;
}

但是,只有当我知道父母是100px宽,但如果我不知道怎么办?

FIDDLE

2 个答案:

答案 0 :(得分:1)

如果您不需要定位IE8及更低版本,则可以使用CSS3 calc()功能:

left: calc(50% - 100px);

将100px替换为绝对定位的子元素的宽度的一半。

JSFiddle示例:http://jsfiddle.net/Gmmqh/5/

请注意使用box-sizing: border-box使盒子彼此平齐,就像在第三个盒子上一样。

答案 1 :(得分:-2)

将任何内容用于代码

margin:0px auto;

所以你的.child成了

.child {
    display: none;
    position: absolute;
    top: 100%;
    margin:0px auto;
    /*left: -50%;*/
    width: 200px;
    height: 300px;
    background: #eee;
    border: solid 3px #ddd;
}