css常用元素水平垂直居中方案

flex实现水平垂直居中

适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。)

绝对定位加上负margin

适用场景：父元素宽高已知未知都行，但是首先得有宽高。其次子元素的宽高必须已知，因为需要设置子元素的负margin. (也可以将负margin设置成translate来做位移实现)

绝对定位 + auto margin

适用场景：父子元素宽高都未知的情况(该方式不需要明确知道子元素宽高，子元素宽高可用百分比，对于子元素宽高不确定需要居中的情况比较适合。)

网格布局

适用场景：父子元素宽高未知，兼容性不大好

Table-cell + text-align + vertical-align

适用场景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素须为行内块元素，较好的兼容性

伪元素

适用场景：父子宽高都可未知，子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%，子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。