有些方式只适用于内联元素(行内元素)，有些方式适用于所有元素，把我胸中韬略，一一展现。
在此之前，我先讲解一下W3C标准盒子模型：
所有HTML元素可以看作盒子，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
稍后会用到：
实际内容大小(Content)、
表面盒子大小(Content+Padding+Border)、
标准盒子大小(Content+Padding+Border+Margin)；
1 所有元素line-height居中：
子元素{line-height:父元素内容高度} 或
子元素{font:24px/父元素内容高度 楷体;}
2 所有元素margin居中：
子元素{margin-top:(父元素内容高度-子元素实际高度)/2}
子元素{margin-bottom:(父元素内容高度-子元素实际高度)/2}
此方法易导致内容坍塌，加：父元素{overflow:hidden} 或
父元素{边框} 子元素{边框} 可解决。
3 所有元素padding居中：
父元素{padding-top:(父元素内容高度-子元素实际高度)/2}
父元素{padding-bottom:(父元素内容高度-子元素实际高度)/2}
此方法易撑大盒子，加：父元素{内容高度 - padding-top} 或
父元素{内容高度 - padding-bottom} 或
父元素{box-sizing:border-box}
4 所有元素transform居中：
子元素{transform:translateY(父元素内容高度-子元素实际高度)/2)}
5 内联元素 或 内联块元素vertical-align居中：
相邻img{vertical-align:middle}
此方法只能配合图片使用，原理是：调准图片基线，让文字等对齐。
6 所有元素定位(position)居中:
父元素{position:relative}
子元素{position:absolute;top:0;bottom:0;margin:auto;} 或
子元素{position:fixed;top:0;bottom:0;margin:auto;}
7 所有元素弹性盒子居中：
父元素{display: flex;align-items: center;}
8 所有元素网格布局居中：
父元素:{display:grid;place-items:center;}
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？
推荐阅读:
如果这篇文章对你有所帮助，请查看我的置顶文章，感谢！愿你的学习一帆风顺，事业蒸蒸日上。