垂直居中的 8 种方式

 有些方式只适用于内联元素(行内元素)，有些方式适用于所有元素，把我胸中韬略，一一展现。

在此之前，我先讲解一下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;}

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？

推荐阅读:

  如果这篇文章对你有所帮助，请查看我的置顶文章，感谢！愿你的学习一帆风顺，事业蒸蒸日上。