css子元素在父元素中居中

元素水平居中

1、子父元素宽度固定：子元素设置margin:0 auto;
2、子父元素宽度固定：父元素设置text-align:center;
并且子元素设置display:inline-block；

• 以上两种情况子元素不能设置浮动，否则居中失效。

元素垂直居中

1、设置子元素和父元素的行高一样。
2、子元素设置为行内块，再加vertical-align：middle。
3、已知父元素高度，子元素相对定位，通过transform：translateY（-50%）。
4、不知道父元素高度，子绝父相，
子元素top：50%，transform：translateY（-50%）
5、创建一个隐藏节点，让隐藏节点的height为剩余高度的一半。
6、给父元素display：table，子元素display：table-cell，vertical-align：middle。
7、给父元素添加伪元素。
8、弹性盒，父元素display：flex，子元素align-self：center。

元素水平垂直居中

1、子元素相对于父元素绝对定位：子元素的top、left设置为50%并且子元素margin-top和margin-left减去各自宽高的一半。
2、子元素相对于父元素绝对定位：子元素上下左右全为0，然后设置子元素margin：auto。
3、父元素设置display：table-cell ；vertical-align：middle，子元素设置margin：auto。
4、子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。
5、子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）。
6、父元素设置弹性盒子：display：flex； justfy-content：center ；align-item：center； justfy-content：center。