0

我创建了一个迷宫，我想将笑脸 div（“highlight_lose”）居中到迷宫（“main”）

#highlight_lose {
    width: 550px;
    height:550px;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    bottom: 375px;


}

这是小提琴链接：http: //jsfiddle.net/uqcLn/30/

4

2 回答 2

1

新答案

根据你给我的，这是所需的 CSS 代码，使用旧的忠实位置绝对方法。

#highlight_lose {
    height: 300px;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -150px;
}
div.sad_smileyface {
    width: 300px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    ...
    [your graphic styling code here]
}

需要注意的一点是，我将包含 div 的宽度设置为 100% 并将其垂直居中。然后我将孩子笑脸 div 水平居中。这不是必需的，只是我做的方法。如果高度改变，调整#highlight_lose，如果宽度改变，更新sad_smileyface

原始答案

如果高度至少是贴花的（你的高度是），将父容器设置为position: relative（只是为了确保），你应该能够margin: auto;在你的子 div 上使用。这应该适用于 IE 6 的跨浏览器。

其他选项包括执行您的方法，将边距设置为高度和宽度的负一半。margin: -275px -275px;.

此外，CSS3 的 Flexbox 模型也将解决此问题，但前缀很重，并且并非所有地方都支持。

于 2013-10-07T20:50:50.997 回答
-1

http://jsfiddle.net/uqcLn/34/

这是新的更新版本，您还可以为旧浏览器设置边距而不是变换

于 2013-10-07T21:18:35.917 回答