CSS垂直居中常用的几种方法

CSS实现垂直居中在网页布局中是经常会用到的，所以一定要牢记这些方法以应对之，写下这篇文章也是为了巩固自己的知识点。

方法一、对父容器使用display: table-cell+vertical-align: middle;使其内的子元素实现垂直居中；

原理：父元素设置为表格的单元格元素，而在表格单元格中的元素设置vertical-align: middle;会使其以中间对齐的方式显示；

化身表格元素实现垂直居中

方法二、父元素设置伪元素并设置伪元素display: inline-block;、vertical-align: middle;和height: 100%，然后设置子元素display: inline-block;、vertical-align: middle;；

原理：父元素设置伪元素，然后让其内的伪元素高为父元素的100%高度，再用vertical-align: middle;和display: inline-block;使子元素与伪元素并排，并且以中间对其的方式进行对其；

伪元素参照物使子元素垂直居中

方法三、设置上下相同的padding（如果子元素是block或inline-block元素，还可对子元素设置上下margin相同来达成同样效果）；

PS：常用于父元素无固定高度时；
原理：利用内边距将内容区域夹在中间；

父元素设置上下padding使其内子元素垂直居中 子元素设置上下margin使其自身在父元素中居中

方法四、利用给父元素设置相对定位，子元素设置绝对定位、margin: auto 0;和top: 0; bottom: 0;实现垂直居中；

原理：因为auto关键词默认自动分配剩余空间，宽度相对window是固定的，所以margin: 0 auto;可以有水平居中的效果，而高度相对window并不是固定的，所以margin: auto 0;不能垂直居中，所以让子元素的上下margin值不相对于window进行计算，改为相对父元素进行计算即可让margin: auto 0;生效；

让margin: auto 0;生效

方法五、利用绝度定位和负margin实现子元素垂直居中；

原理：利用子元素绝对定位，相对父元素向下移动父元素高度的50%，然后再利用负margin向上移动自身高度的50%达到垂直居中效果；

绝对定位+负margin达成垂直居中

其它：利用行高line-height和父元素高一致来实现文本在父元素中垂直居中；

利用行高与父元素高度一致达成垂直居中