各位小伙伴在写前端代码的时候，经常会遇到元素垂直居中的情况，虽然css垂直居中是一个很简单的问题，但细细研究下来却发现原来一个垂直居中并不简单。

先从一个最简单的场景说一下吧。

如上图所示，在一个固定的div框内有一行文字，我们需要把文字水平垂直居中，我相信各位小伙伴都可以解决这个问题，就是给文字一个行高，以及text-align。

但有一天我们发现红框的文字变成多行的时候，问题就来了

这时候我们就发现我们就发现文字竟然跑到外面去了，这时候我们就发现刚才方法的弊端就是只适用于单行文字垂直居中。那我们怎么解决多行文字垂直居中的问题呢？我们先来一个笨办法试试效果。现在文字有两行，我们要求文字的行高是30px。那两行的文字的高度就是60px。外面红框的高度是100px。如果让文字垂直居中的话需要给span一个( 100 - 60 ) / 2 = 30px的padding-top。好废话不多说，上代码

可运行结果确没有按照我们想象中的进行，文字并没有垂直居中，这是为什么呢？这是因为span默认是行内元素，行内元素给padding-top是不起作用的，这时候我们需要做的就是改变span的display，让其变成块元素。

这时候我们发现文字已经垂直居中啦。但这个padding-top需要手动计算出结果，可不可以让css自动计算出padding-top的值呢（这里问什么用padding-top而不用margin-top呢？其实这里有个很尖锐的问题，先挖个坑，留着以后说明）？答案是可以的，css3中新增的计算属性calc()就可以帮我们解决这个问题。

需要注意的一点就是calc中的运算符号前后需要各加一个空格

这个时候我们发现即使用calc计算也存在很多问题，这种方法“太笨”了，比如现在文字变成了三行，行距变成了20px。这时候我们需要重新计算padding-top的值。由此我们可以得出这种方法的适用于文字基本固定不变的场景。如何解决动态内容的垂直居中呢？我们先把span的display:block去掉，然后加另外一个属性vertical-align。这个属性是用来处理元素垂直对齐方式的

运行结果确跟我们想象的并不一样

文字没有垂直居中。vertical-align这个属性脾气很怪异，时而有用，时而无用，有很多时候着实让人摸不着头脑，关于此属性的解析我会在后续的文章中做详细的讲解，在这就不过多的阐述。我们都知道html中的单元格是有水平居中与垂直居中的属性的，那我们可不可以把span变成具有单元格属性的元素呢？答案当然是肯定的。

文字并没有垂直居中，其实这是因为需要单元格无法根据父元素的高度在确定自己的高度决定的，决绝方法就是给一个高度即可，

完美。不管文字有多少个，多少行，文字始终会垂直居中了。这种方法是很值得推荐的，因为兼容性好，甚至可以兼容ie6。前提是文字总内容不要超出外边框

文字可以通过js或者后端程序进行截取。

用vertical-align: middle配合display: table-cell;让元素居中的在很多时候是很脆弱的，比如一旦使用的float或者绝对定位固定定位等就会失效。

上面讨论的方法都是限制知道外部元素具体的高度情况下的垂直居中，一旦外部高度改变，那我们就需要修改span相对应的参数，很不方便，也不灵活。那外部容器高度不确定的情况下如何做到垂直居中呢？

我们可以利用最经典的方式positon+margin

运行结果：

完美，绿色的方块已垂直居中。这时候我们修改外部元素的高度绿色的块也会居中。

内部元素用到top与margin-top两个属性来控制元素垂直居中，虽然margin-top可以用calc()来计算，但还是需要在写一次内部元素的高度，那有什么办法解决这一问题呢？其实很简单，

给绝地定位的元素一个初始left，top，bottom, right。那元素的margin:auto就会起作用。

如果这时候让文字也在绿色框中垂直居中呢？我们想到了很经典的vertical-align: middle配合display: table-cell。但这里用了绝对定位，用vertical-align: middle不会起作用。那我们解决这问题呢？

很简单我们在span里面在嵌套一层。

运行结果：

完美。垂直中的垂直。

那问题又来了，如果外部元素的高度位置，内部元素的高度未知，如何做到内部元素相对于外部元素垂直居中呢？

解决这个问题的方法有很多种，大部分是用css3去处理的。当然css2也是可以完成的。我再这里写几种比较常见的

这里用文字垂直居中举例说明，为什么用文字呢？因为文字的高度是不固定的，文字的多少会影响元素的高度，所有用文字垂直居中来演示再好不过了。

第一种是用::before伪元素配合vertical-align

这里需要注意的就是display: inline-block元素之间的间距问题。

由于display: inline-block间距的问题导致文字达到一定宽度的时候会整体移出外部元素，解决办法是吧外部元素的字体大小设置为0，然后再在内部元素内加一个字体大小即可。

是不是很完美。但这时候对有强迫症的我来说发现一个问题，就是文字左右边距竟然不一样。

这个问题的解决方法也很简单，来一个text-align: justify;文字两端对齐

第二种方法就是定位配合位移。

前文提到用posrtion配合top以及margin-top实现垂直居中，前提是需要知道居中元素的高度，如果用css3的transform: translate()属性的话就无需知道内部元素的高度啦

是不是感觉css3真的很神奇。

第三种方法就是利用flex

是不是很简单粗暴，内容部元素都不需要写任何样式。果然还是css3好用啊

第四种方法就是利用Grid + template

这个用的css3的列，使用不是很多，有兴趣的小伙伴可以自行了解一下。

关于flex跟Grid让元素垂直居中可以裂变出很多种方法，在这里我就不一一列举了，以后介绍flex或者grid的时候会详细介绍，再次不在赘述。