很简单
一句话：父盒子宽度不用管，子盒子宽度用百分数设置
第一步body百分百根据页面大小变化，最大宽度，最小宽度。因为他检测到是手机端，而且写了max-width，所以只有当换成手机显示时才能沾满，换成浏览器显示的话只能显示640px
这种写法会是图片和文字的基线对其，实际上左边的 × 号是底部跟居中文字的底部对其。
而第二个京东图标只通过上面的写法就不能居中对其了，因为默认图片底部跟文字对其。所以用vertical-align: middle;
左右两边盒子大小不变，位置用定位。左右两边盒子不占位置，中间盒子不设置宽，用margin把他挤到中间实现自适应变大变小。
JD小图片，这种写法无敌，应付所有情况。当然要给父亲加相对定位
图片链接一般是 a 里面包个 img，导航栏一般是 li 里面包个 a
移动端写这种直接一个div里面包含10个 a，不用加 li 了
单个盒子，左右居中用text-align: center，上下缝隙用margin
标签：居中,盒子,布局,li,案例,宽度,手机,移动,写法 From： https://www.cnblogs.com/dfzj/p/18073117