用百分比50％的绝对定位

，我发现从这个一个anwswer： Absolute positioning with percentages giving unexpected results 用百分比50％的绝对定位

但得到的答复是不完全正确显示在我的屏幕

这里是jsFiddle从这个问题的答案上。

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    position: relative; 
} 

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
}

enter image description here

我有这个问题

，50％是没有父母的宽度的一半，如果有人可以帮助？

来源

2013-08-22 olo

50％是父母的宽度的一半。如果你看看左边的红色边框和字母“T”之间的距离，那是父宽度的一半。 –

你期望它显示什么？ – uptownnickbrown

显示到父母的宽度中心 – olo

它正确地将元素定位在50％ - 此时item元素的左上角处于此位置。如果你想绝对完全居中，你需要添加item宽度的一半的负左边距：

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
    margin-left: -20px; 
}

如果不打算满足您的需求，考虑使用text-align: center和margin: 0 auto作为一个选项代替。在你的jsFiddle中，目标并不完全清楚。

来源

2013-08-22 04:45:02 alecananian

感谢您的回答，“-20px”来自哪里？ – olo

你的'item'元素是41px宽，所以一半是~20px。添加负左边距会将项目20px拉到左侧，使其居中。 – alecananian

使用负值不是一种好的做法。 –

就x和y像素位置而言，item div位于容器div宽度的50％处（即距100px容器左边50px）。

如果您增加容器的宽度，您将相应地看到项目div的位置。

来源

2013-08-22 04:55:15

使用以下样式。没有必要绝对和负价值风格：

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    text-align: center; 
} 

#item { 
    border: 1px dashed purple; 
    display: inline-block; 
    margin: 0 auto; 
}

Fiddle

来源

2013-08-22 04:59:40

谢谢，但我需要绝对和它的父母亲的图像有时 – olo

用百分比50％的绝对定位

回答

相关问题