元素水平居中

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。

好文推荐

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：