【问题标题】: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

    【讨论】:

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