妙用 max 和 calc 函数实现元素居中两端等宽自适应

在 css 世界中，有时一句 css 就能实现很强大的功能，这是因为有了函数的存在。

底下这句 css 就能够很轻松的实现元素两端等宽自适应

padding: 1em max(1em, calc(100vw - 70ch)/2);

70ch 表示元素的 width 为 70个字母长度。元素两端的补白宽度为 （屏幕宽度 - 元素宽度）/ 2 ，当补白宽度小于 1em，用 1em 代替。用 max 就是为了指定 1em 为最小补白宽度，防止元素两端宽度消失。

div {
  height: 100px;
  padding: 1em max(1em, calc(100vw - 70ch)/2);
  
  background: blue;
  background-clip: content-box; /*背景颜色只应用在 content 区域*/
}