纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
(编辑：jimmy 日期: 2024/12/27 浏览：3 次 )
关于在html中浮动层是众多网页爱好者刚开始的难点，主要在于定位。如果你对CSS定位还不够了解 可以接着往下看，运行里面的内容即可。
【需求】：
将一个网页分成头、身和脚三部分。如下：
————————————————————
头
————————————————————
身
————————————————————
脚
————————————————————
要求：1、头脚等高，并且头位于浏览器顶部，脚位于浏览器底部，身高可变化；
2、在身的左右分别放置两个垂直居中的div，类似浮动广告条，位置固定，不随滚动条的滚动和滚动；
【问题】：
1、如何固定层？
复制代码代码如下:
/* 全局浮动层固定默认样式设置，支持FF和IE */
.fixed {position:fixed;}
* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是为了显示滚动条,即right最小值为16px */
以下摘抄一部分文字如下：
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
2、如何垂直居中？
这个问题其实就是DIV绝对定位是居中问题。其实so easy！以下是我的思路：只要将该固定定位的div的top设为50%，然后将上移到该层的高度的一半就行了(margin-top为负)，例如，如果某div高度为200px，要使得该div垂直居中，只要设置"position:absolute;top:50%;margin-top:-100px"，就是这么简单！
因此，水平居中也解决了，如果该层宽度为300px，那么"position:absolute;left:50%;margin-left:-100px"代码可以解决水平居中问题。
即水平又垂直，那就将两者结合起来喽！嘿嘿。。。
【需求】：
将一个网页分成头、身和脚三部分。如下：
————————————————————
头
————————————————————
身
————————————————————
脚
————————————————————
要求：1、头脚等高，并且头位于浏览器顶部，脚位于浏览器底部，身高可变化；
2、在身的左右分别放置两个垂直居中的div，类似浮动广告条，位置固定，不随滚动条的滚动和滚动；
【问题】：
1、如何固定层？
复制代码代码如下:
/* 全局浮动层固定默认样式设置，支持FF和IE */
.fixed {position:fixed;}
* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是为了显示滚动条,即right最小值为16px */
以下摘抄一部分文字如下：
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
2、如何垂直居中？
这个问题其实就是DIV绝对定位是居中问题。其实so easy！以下是我的思路：只要将该固定定位的div的top设为50%，然后将上移到该层的高度的一半就行了(margin-top为负)，例如，如果某div高度为200px，要使得该div垂直居中，只要设置"position:absolute;top:50%;margin-top:-100px"，就是这么简单！
因此，水平居中也解决了，如果该层宽度为300px，那么"position:absolute;left:50%;margin-left:-100px"代码可以解决水平居中问题。
即水平又垂直，那就将两者结合起来喽！嘿嘿。。。