纯css居中弹出层 随滚动条居中

本文只对css新手普及基本知识，高手飘过。

另，本文只说明弹出层如何固定居中在屏幕正中，并且随滚动条移动始终居中。 弹出、关闭事件简单，请自行解决。

下面开始正文，请先看图，如何让一个宽度 400px的弹出窗口居中，这次首先要用到一个很基础的常识

left ,top,width,height等的标示方法，可以是auto默认值。浏览器可计算出实际的宽度。length使用 px、cm 等单位定义宽度。%定义基于包含块（父元素）宽度的百分比宽度。inherit规定应该从父元素继承 width 属性的值。

假设 body的宽度是980px ， 那么我们定义一个弹出层div 宽度是400px，高度是200px，因为我们需要他的位置是固定不变的，所以位置定义为 position:fixed;

然后定义该DIV的位置, 我们把top left 两个都设为 50%  style=“top:50%;left:50%”那么目前这个div的位置就是图一所示的位置

我们可以清楚的看到，相对于我们要的结果，明显的弹出层div偏下，偏右，剩下的我们只要将位置重新设定他的外边距

需要偏移的量是多少呢？ 图二可以看到，其实只是div宽高的一半，那么 只需要在style中加上margin-left:-200px;margin-top:-100px;

综上，我们可以得出完成之后的css 样式

 style { width:400px;height:200px;margin-left:-200px;margin-top:-100px;position:fixed;left:50%;top:50%;z-index:999;_position:absolute">

按照这个思路我们也可以写出不需要js就可以实现出来的body右侧经常会用到的“联系我们”，或者”帮助“的固定滚动条

相对于图二，我们只需要更改下边距即可实现。 body的宽度是980 我们要使”联系我们“在body右侧，并且距离body有10px的距离 ，就需要向右偏移body的一半宽度，再加10px 也就是 500px

如图三：

有了思路，在屏幕中的任何位置都没有任何问题