parent 是父元素的类名，child是子元素的类名。
1、绝对定位
绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示。我们需要对于子元素进行偏移，所以有定宽和不定宽的区别。
1）absolute + 负margin（定宽）
可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了。
2）absolute + margin auto（定宽）
这种方式也要求居中元素的宽高必须固定。设置各个方向的距离都是0，此时再将margin设为auto，就可以在各个方向上居中了。
3）absolute + calc函数（定宽）
使用 calc() 函数计算 <div> 元素的宽度。
calc() 函数用于动态计算长度值。
a、需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
b、任何长度值都可以使用calc()函数进行计算；
c、calc()函数支持 "+", "-", "*", "/" 运算；
d、calc()函数使用标准的数学运算优先级规则；
以上的方式都需要知道不需要子元素固定宽高。
4）absolute + transform（不定宽高）
使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了。
2、flex布局
通过flex布局，将里面的内容和项居中即可。
3、grid布局
网友评论