垂直居中DIV和水平

Question

我创建了一个迷宫，我想在兴高采烈DIV（“highlight_lose”）经我中心迷宫（“主”）

#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％并将其居中为垂直。然后，我将孩子的笑脸div水平居中。这不是必须的，只是方法，我做到了。如果高度变化，调整#highlight_lose，如果宽度的变化，更新sad_smileyface

原来的答案

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

其他选项包括做你的方法，通过设置边缘为负一半的高度和宽度。 margin: -275px -275px;。另外，CSS3的Flexbox模型也会解决这个问题，但是它的前缀很大，并且在任何地方都不受支持。

Answer 2

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

这里是新的更新版本，您还可以设置保证金，而不是改造旧版本浏览器