垂直和水平居中 div [重复]答案

【问题标题】：Centering a div vertically and horizontally [duplicate]垂直和水平居中 div [重复]
【发布时间】：2013-10-14 14:11:54
【问题描述】：

我创建了一个迷宫，我想将 smily div（“highlight_lose”）置于迷宫（“main”）的中心

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


}

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

【问题讨论】：

标签： css html position css-position center

【解决方案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（只是为了确保），您应该能够在您的子 div 上使用margin: auto;。这应该适用于 IE 6 的跨浏览器。

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

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

【讨论】：

这是我尝试后发生的事情：jsfiddle.net/uqcLn/32
它对我有用，有没有办法可以简化你的 jsfiddle。有了所有这些 div 和效果，很难找到必要的 div。
这里是：jsfiddle.net/uqcLn/35
非常感谢！终于我得到了一个体面的答案！谢谢
不客气。感谢您的接受。

【解决方案2】：

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

这里是新的更新版本，老浏览器也可以设置margin而不是transform

【讨论】：

请在答案中附上代码
根本不适合我。笑脸还在角落里。