垂直和水平居中 div

Question

我创建了一个迷宫，我想将 smilydiv （"highlight_lose"） 居中到迷宫（"main"）

#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/

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