css - 页面水平和垂直居中 IE 6+

Question

我正在尝试将 1 个 #div 框居中，其中有两个小 #divs，位于屏幕/页面的正中间 - 最好是横跨所有分辨率和 IE 6 +，最好的方法是什么？

margin:0 auto; 

似乎水平方向可以解决这个问题，但垂直方向呢？

Answer 1

如果您知道要居中的元素的大小，可以设置以下 CSS 使其水平和垂直居中:

#centered {
    position   : absolute;
    left       : 50%;
    top        : 50%;
    width      : 150px;
    height     : 200px;
    margin     : -100px 0 0 -75px;/*set the left and top margins to the negative of half the element's width and height (respectively)*/
    background : #000;
}

请注意，元素的父元素需要将 position 设置为 static 以外的值:

#container {
    position : relative;
    width    : 100%;
    height   : 100%;
    border   : 1px solid #000;
}

这是一个 jsfiddle:http://jsfiddle.net/jasper/rcN3P/

附言我检查了一下，这在 I.E 中有效。 6.