垂直居中的 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;}

在这里插入图片描述

在这里插入图片描述

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

推荐阅读:

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