csscode.parent{width:300px;高度：300px；背景色：蓝色；}.child{宽度：100px；高度：100px；background-color:red;}以下代码是在上述代码的基础上添加的，不再赘述。要实现的效果是让子元素在父元素中水平和垂直居中。弹性布局。父{显示：flex;证明内容：居中；align-items:center;}这是最经典的用法，但是也可以有另外一种写法：.parent{display:flex;}.child{align-self:center;margin:auto;}2.absolute+negativemargin这种方法适用于已知固定宽高的情况。.parent{位置：相对；}.child{位置：绝对；顶部：50%；左：50%；边距顶部：-50px；margin-left:-50px;}3.absolute+transform.parent{position:relative;}.child{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}四、absolute+marginauto.parent{position:relative;}.child{position:absolute;顶部：0；左：0；右：0；底部：0；margin:auto;}五、absolute+calc这种方法适用于已知固定宽高的情况。.parent{位置：相对；}.child{位置：绝对；顶部：计算（50%-50px）；left:calc(50%-50px);}6.text-align+vertical-align.parent{text-align:center;行高：300px；/*等于父级的高度*/}.child{display:inline-block;垂直对齐：中间；行高：初始；/*这样child中的文本就不会在下面运行*/}七、table-cell.parent{display:table-cell;文本对齐：居中；vertical-align:middle;}.child{display:inline-block;}八、Grid.parent{display:grid;}.child{align-self:center;justify-self:center;}九、writing-mode.parent{writing-mode:vertical-lr;text-align:center;}.child{书写模式：horizo??ntal-tb;显示：内联块；margin:0calc(50%-50px);}ps：个人技术博文Github仓库，觉得不错欢迎star，多多鼓励~