纯css居中弹出层随滚动条居中
本⽂只对css新⼿普及基本知识，⾼⼿飘过。
另，本⽂只说明弹出层如何固定居中在屏幕正中，并且随滚动条移动始终居中。 弹出、关闭事件简单，请⾃⾏解决。
下⾯开始正⽂，请先看图，如何让⼀个宽度 400px的弹出窗⼝居中，这次⾸先要⽤到⼀个很基础的常识
left ,top,width,height等的标⽰⽅法，可以是
auto默认值。浏览器可计算出实际的宽度。
length使⽤ px、cm 等单位定义宽度。
css设置表格滚动条%定义基于包含块（⽗元素）宽度的百分⽐宽度。
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
如图三：
有了思路，在屏幕中的任何位置都没有任何问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。