子元素如何在父元素中居中

水平居中：

1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效

2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

水平垂直居中：

子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半

子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto

父元素设置display：table-cell vertical-align：middle，子元素设置margin：auto

子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%）

子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）

父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center； justfy-content：center

10.Border-box与content-box的区别？

Content-box 标准盒模型 width不包括padding和border

Border-box 怪异盒模型width包括padding和border

11.如何让元素垂直居中？

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
 

参考文章:面试