CSS 使用 position relative+absolute 或 negative margin

Question

我想将一个小的 div (50x50) 放在另一个 div (200x200) 的中心。

我有两种方法:

Using position absolute and relative

position:relative
position:absolute
top:75px;
left:75px;

或

Using negaive margin

margin:-125px 0 0 75px;

我想知道哪种方法更好，为什么...
我听到有人说不推荐这个职位..是真的吗？为什么？

编辑:
div 是示例。
实际上，我在另一张图片上方得到了一张图片(youtube 预览图片，并在其上方播放按钮图片)。
图像在 Accordion 内部，在 ie6 中关闭 Accordion /打开它会导致绝对容器漂浮在一切之上......

Answer 1

使用absolute 和relative 定位没有错，它们已经被完全支持很长时间了。在你的两种方法中，我肯定会选择绝对和相对位置，因为边距有点老套。

就我个人而言，我不会使用您的任何一种方法，而是将 #small 放在 #big 中，因为它在语义上更正确(因为 #small 在 #big 内)。

See on jsFiddle

HTML

<div id="con">
    <div id="big">
        <div id="small"></div>
    </div>
</div>

CSS

#big {
    width:200px;
    height:200px;
    background:red;
    position:relative;
}
#small {
    position:absolute;
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
    left:50%;
    top:50%;
    background:blue;
}