最近由于某些原因学起了前端的一些东西（才不是嫌自己用Dreamweaver写的网页丑呢），在做网页自适应的时候遇到了这样一个问题：使用css中的float:left可以做到每行盒子数量随着窗口的大小自动调整，可是这些盒子怎么居中呢？
我们来看看目前的网页：试着改变浏览器的宽度看看效果（手机端没人权）。你会发现一行的盒子在页面上大体是居中的。具体来说，当且仅当新盒子刚追加的时候完美居中，而随着宽度增加并且还不足以多容纳一个盒子时，这行盒子显得越来越左。这显然不符合审美！因此我们需要做点改进。
.
怎么改呢？或许在纯css中有很简单的写法，也许改个布局就可以解决这个问题，可是由于笔者刚学css几个小时，知识储备不足，没想到合适的解决方案。于是，便把目光投向js。
这个网页是由php作为后端，vue作为框架搭建的，要使用js的话自然想到用vue来实现。（当然也许用jsDOM获取一下会很简单，但是笔者js也才刚学几个小时……）这样一来，实现思路应该是比较明确的：为装盒子们的大盒子设置left左边距，左边距的值应当是页面宽度的75%（或者是元素宽度）减去每行所有盒子的宽度的一半。那我们要做的就是：一、动态获取页面宽度；二、将大盒子的样式属性（左边距的值）绑定到一个变量。
网上找过很多写法，用mounted挂载窗口宽高到属性和watch监听宽高改变，应该是行得通的，但是笔者这里都尝试失败了。最后在https://blog.csdn.net/u012577474/article/details/103065553上找到了讲页面宽高动态绑定到变量的方法，自己再改改，为大盒子v-bind一下style属性就好了（这里附上一个动态获取宽高的demo网址：http://h5learn.4-xx.com/site/vue/vuetest1.html，感兴趣的同学可以审查元素看看是怎么写的）。
啊，完美？不，不完美。现在的页面是这样的：改变浏览器宽高确实可以让每行盒子居中，但是！居中的左右偏移和每行盒子数量增加得不！统！一！也就是说可能会出现一行已经整体左偏为盒子腾出空间，但是盒子还没有上来的情况。
我们的公式基本是没问题的，210为盒子宽度，那么总宽除以宽度就是每行盒子的个数。但是由于float:left自适应的机制不明，所以需要在-0的地方加个偏移量，加少了加多了就会出现下面两种情况。要么先左移再增加盒子，要么先增加盒子再左移。而这两个操作应该是同步进行的，不同步的量根据数值距离12的偏差增大而增大。
var wid_win=window.innerWidth; var num=Math.floor((wid_win*0.75-0) / 210); this.val=(window.innerWidth*0.75/2-num*105)+'px';
.
.
最后调整到12就能做到完美匹配了。至于为什么是12，笔者也不清楚，希望能有读者为我解惑，谢谢！
.
最后附上一些页面链接，读者可以直接打开改变浏览器宽度查阅效果：
原始页面（不带css）：
http://h5learn.4-xx.com/site/vue/notebook-nocss.html
css设置后的页面（居中效果差）：
http://h5learn.4-xx.com/site/vue/notebook-bak.html
经过js加工后的页面（少数情况有偏移）：
http://h5learn.4-xx.com/site/vue/notebook-bad1.html
http://h5learn.4-xx.com/site/vue/notebook-bad2.html
调整后的页面：
