垂直水平垂直居中解决方法一：absolute+margin负值时width已知.parent{width:400px;高度：400px；背景：红色；位置：相对；}.child{位置：绝对；左：50%；顶部：50%；背景：黄色；宽度：50px；-左：-25px；margin-top:-25px;}纵横居中方案二：absolute+transform.parent{width:400px;高度：400px；背景：红色；位置：相对；}.child{位置：绝对；左：50%；顶部：50%；transform:translate(-50%,-50%);}垂直居中方案三：position+margin:auto.parent{position:relative;宽度：200px；高度：200px；背景：红色；}.child{宽度：80px；高度：40px；背景：黄色；位置：绝对；左：0；顶部：0；右：0；底部：0；}垂直居中解决方案四：+多行文字垂直居中：table-cell+vertical-align:middle;.parent{height:300px;宽度：400px；边框：1px纯红色；显示：表格单元格；垂直对齐：中间滴;text-align:center;}.child{display:inline-block;宽度：50px；高度：50px；背景：蓝色；}/*或*/.parent{宽度：400px；高度：300px；显示：表格单元格；垂直对齐：中间；边框：1px纯红色；text-align:center;}.child{display:inline-block;垂直对齐：中间；background:blue;}垂直居中解决方案五：display:flex.parent{width:400px;高度：200px；背景：红色；显示：弹性；证明内容：居中；align-items:center;}.child{height:100px;宽度：100px；background:green;}verticalcenter方案六：伪元素.parent{width:200px;高度：200px；背景：红色；text-align:center;}.child{height:100px;宽度：100px；背景：黄色；显示：内联块；vertical-align:middle;}.parent:before{content:"";高度：100%；垂直对齐：中间；display:inline-block;}以下文章是学习过程的总结，如有发现错误请留言指出~