在网页设计过程中我们可能会出现这种情况：设置好一个固定定位的盒子，但是当网页缩放时固定定位的盒子与网页的版心分离
这是因为css定位中的固定定位是以页面为参照进行定位的，而不是以版心盒子为参照，那么我们如何解决这个问题，实现让固定的盒子以版心为参照，在缩放时随版心一同缩放呢？
此时，我们可以先让固定定位的盒子以网页的中心为参照，再利用 margin 移动距离，即可实现网页缩放时随版心一同缩放，这里以左边的固定定位盒子为例
1 <style> 2 .fixed_box { 3 /* 为了方便将宽高先写上 */ 4 width: 130px; 5 height: 150px; 6 position: fixed; 7 8 /* 实现垂直居中 */ 9 top: 50%; 10 margin-top: -75px; 11 12 /* 将固定定位的盒子定位到网页中线 */ 13 left: 50%; 14 15 /* 将盒子定位到网页中线之后，向左移动版心宽度的一半加上自身的宽度，即可与版心对齐 */ 16 margin-left: -750px; 17 18 /* 注：这里假设版心宽度为1200px，如果想被固定的盒子和版心之间有间隙的话还可以添加宽度，比如这里在版心和固定的盒子之间有 20px 的宽度 */ 19 } 20 21 </style>
我们来看效果（这里只设置和左边盒子，和右边盒子形成对比）：
