1. 对左右两侧的 .preview 设置 position: relative (通过relative来实现平移居中)

2. 字符 "A" 显示不居中,无非是多了隐藏起来的一截 .line 的长度

3. 所以想看让 "A" 看起来居中的话, 其实很简单, 只要将其平移  .line 长度的一半 即可.

   -----------------------------------------------------------------------

4. 具体做法, 可以通过 this.$ref.xxx.offsetWidth ,先获取到 .select 的整个宽度(就是除了左右两边 .preview 以外的总宽度)

5. 再用 .select 的总宽度 ÷ fontSizeList 数组的长度 得到每一个 .select-wrapper (即: 线点线) 的宽度

6. 每一个 .select-wrapper (即: 线点线) 的宽度 ÷ 4 得到 .line 长度的一半

7. 该值就是 左侧 .preview 的 style 需要设置的 left 数值(左侧 .preview 往右平移)
   

8. 该值就是 右侧 .preview 的 style 需要设置的 right 数值(左侧 .preview 往右平移)

通过  style 属性动态绑定，更方便

比如 当 index === 0  或 index === fontSizeList.length - 1 时，设置  对应最左和 最右边的 line  flex : 0 0 0;

设置 最左 和最右 的 select-wrapper  flex: 0.5;

就是template 上看上去复杂些

// 可以用css3样式实现啊,前提是知道fontSizeList的长度,
// 我想的有点复杂, 先算出单个item宽度(100% - 80px) / 14;
// 然后把preview移到居中的位置 ((100% - 80px) / 14 + 40px) / 2;
// 最后再往回移动半个preview的距离((100% - 80px) / 14 + 40px) / 2 - 20px;
// 具体:
.preview {
    flex: 0 0 px2rem(40);
    @include center;
    position: relative;
    &.left{
        left: calc(((100% - 80px) / 14 + 40px) / 2 - 20px);
       }
    &.right{
        right: calc(((100% - 80px) / 14 + 40px) / 2 - 20px);
     }
}