更多的时候我们第一反应是用js计算解决问题，但是js的计算是消耗性能的，所以在有选择的情况下我们应该尽量给自己储备多的选项。
1、实现一个不定宽高的盒子居中
<div class='test-wrap'>
<div class='test'>里面的盒子</div>
</div>
方案一: 利用flex
.test-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 700px;
}
方案二：利用transform
.test-wrap {
position: relative;
width: 500px;
height: 700px;
}
.test {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
还有很多方式，例如利用display:table-cell等，但是建议不要用js计算
2、实现某一个板块的滚动跟随（阈值之后吸附于某位置）
position：sticky
因为该属性具有兼容性，所以还需要用js做兼容，具体实现参考https://www.jianshu.com/p/817a5627e2ef
3、打点loading效果
<div class='test-wrap'>
正在加载中
<span class='dot'>...</span>
</div>
备注：主要是利用content
.dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
.dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 1s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
