html调整垂直居中,全屏垂直居中的HTML页面的方法？

我正在为HTML页面寻找有效的跨浏览器解决方案：

>消耗100％的屏幕高度,没有溢出(即没有滚动)

>具有垂直(和水平)居中< div>这将掌握主要内容

我知道当包装容器具有静态高度时,可以进行垂直定心.将此高度调整到浏览器窗口高度是否可行？ (最好不要使用JS.)

301_10@

取决于你对“跨浏览器”的意思.以下工作正常,所有当前的,标准兼容的(因此不是IE6)：

HTML：

CSS：

html,body,#a {

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

#a {

display: table;

}

#b {

display: table-cell;

margin: 0;

padding: 0;

text-align: center;

vertical-align: middle;

}

#content {

border: 5px solid red;

width: 100px;

height: 100px;

margin: auto;

}

实例：