全屏垂直居中的HTML页面的方法？

概述我正在为HTML页面寻找有效的跨浏览器解决方案： >消耗100％的屏幕高度,没有溢出(即没有滚动) >具有垂直(和水平)居中< div>这将掌握主要内容 我知道当包装容器具有静态高度时,可以进行垂直定心.将此高度调整到浏览器窗口高度是否可行？ (最好不要使用JS.) 取决于你对“跨浏览器”的意思.以下工作正常,所有当前的,标准兼容的(因此不是IE6)： HTML： <div id="a"> 我正在为HTML页面寻找有效的跨浏览器解决方案：

>消耗100％的屏幕高度,没有溢出(即没有滚动)
>具有垂直(和水平)居中< div>这将掌握主要内容

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

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

HTML：

<div ID="a">    <div ID="b">        <div ID="content"></div>    </div></div>

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;}

实例：

http://jsfiddle.net/mGPmr/1/

总结

以上是内存溢出为你收集整理的全屏垂直居中的HTML页面的方法？全部内容，希望文章能够帮你解决全屏垂直居中的HTML页面的方法？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。