实现盒子水平垂直居中的10种方法

第一种:通过绝对定位的方式 absolute + 负margin

实现操作：

父：{
  position:relative
}
子：{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-(子盒子宽的一半);
  margin-top:-(子盒子高的一半）;
}

缺点：需要知道子元素的宽高
优点：比较好理解，兼容性好

第二种：也是通过绝对定位的方式 absolute + margin auto

实现操作：

父：{
  position:relative
}
子：{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

优点：兼容性也很好
缺点：需要知道子元素的宽高

第三种：absolute + calc（计算）

实现操作：

父：{
  position:relative
}
子：{
  position:absolute;
  top:calc(50% - 子盒子高的一半);
  left:calc(50% - 子盒子宽的一半);
}

详解：这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了

calc:任何长度值都可以使用calc()函数进行计算； calc()函数使用标准的数学运算优先级规则； 它支持 “+”, “-”, “*”, “/” 运算

查看calc教程：https://www.runoob.com/cssref/func-calc.html

优点：他的兼容性依赖的是calc的兼容性

缺点：同样是需要知道子元素的宽高

第四种：absolute + transform （过渡）

实现操作：

父：{
  position:relative
}
子：{
  position:absolute;
  top:50%;
  left:50%;
 transform:translate(-50%,-50%)
}

详解：

这个方法不需要子元素固定宽高
修复绝对定位的问题，还可以使用css3新增的transform，transform的translate
属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

优点：代码量少
缺点：IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

第五种：line-height

只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

优点：代码简洁

缺点：只对文本有效，只对单行文本有效，多行文本不可以

第六种：writing-mode

可以参考:https://www.runoob.com/cssref/css-pr-writing-mode.html

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向

第七种：table 形式

通过table单元格的形式设

优点：tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

缺点：这个不是table的正确方法，不是很建议使用，但是也是可以实现的

第八种：table-cell实现水平垂直居中: table-cell middle center组合使用

父：{
 display:table-cell;
 text-align:center;
 vertical-align: middle;
}

第九种：弹性盒子的方式

父：{
 display:flex;
 justify-content: center;
 align-items: center;
}

优点：移动端使用灵活自如

缺点：pc端需要根据兼容情况来判定

第十种：grid（网格布局）

给父级设display:grid;

给子元素设align-self: center;justify-self: center;

优点：代码量少

缺点：兼容不如flex，建议用flex