Question

我创造了一个迷宫，我想将笑脸div（“突出失败”）置于迷宫中（“主要”）

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


}

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

Answer 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％并将其居中垂直。然后，我将孩子的笑脸水平居中。这不是必需的，只是我执行的方法。如果高度发生变化，请调整#highlight_lose，如果宽度发生变化，请更新sad_smileyface

原始答案

如果高度至少为十分（您的身高），请将父容器设置为position: relative（只是为了确保），您应该可以在您的子div上使用margin: auto;。这应该跨浏览器到IE 6。

其他选项包括通过将边距设置为负高度和宽度的一半来完成您的方法。 margin: -275px -275px;。

另外，CSS3的Flexbox模型也可以解决这个问题，但是在很大程度上都是前缀并且在任何地方都不受支持。

Answer 2

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

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

垂直和水平居中div

2 个答案: