2020-12-17 html、css面试题3: 水平垂直居中，左右固定中间自适应 三栏布局，静态布局、自适应布局、流式布局、响应式布局、弹性布局，IE中常见的兼容性问题，清空数组的方法

11.如何让一个盒子水平垂直居中

1、 如何让一个盒子水平垂直居中

①定位：（常用方法,推荐）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外边距：margin-left:值;
margin-top:值;
④margin:auto;（不兼容低版本的IE浏览器）
⑤弹性盒模型：display:flex;
justify-content:conter;
align-itens:center;
⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
transform: translate(-50%,-50%)导致的像素模糊问题解决办法：
  /** 这 0.5px加或者减都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc计算

12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子…）

圣杯布局：

缺点：当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。

双飞翼布局:

与圣杯