位小伙伴在写前端代码的时候，经常会遇到元素垂直居中的情况，虽然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计算也存在很多问题，这种方法“太笨”了，比如现在文字变成了三行，行距变成了20px。这时候我们需要重新计算padding-top的值。由此我们可以得出这种方法的适用于文字基本固定不变的场景。如何解决动态内容的垂直居中呢？我们先把span的display:block去掉，然后加另外一个属性vertical-align。这个属性是用来处理元素垂直对齐方式的

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

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

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

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

用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的时候会详细介绍，再次不在赘述。

页CSS的垂直居中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈的研究后，据说CSS的垂直居中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直居中技巧当成面试题，其重要性可见一斑。

在不断探索，发现中，CSS的垂直居中的方式竟然能达到23种，大家可以看看自己熟知的是哪几种？

1、Line-height

适用情景：单行文字垂直居中技巧

这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求了。

<div class="content">web前端开发</div>
.content{ width: 400px; background: #ccc; line-height:100px; margin: auto;
}

2、Line-height + inline-block

适用情景：多对象的垂直居中技巧

既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置，如此便可以达到垂直居中的目的了，从使你的数据是包含了标题跟内容在内也可以正常的垂直居中了。

<h2>line-height + inline-block</h2><div class="box box2">
 <div class="content"><a href="#">web前端开发</a></div></div>
.box{ width: 500px; border: 1px solid #f00; margin: auto; line-height: 200px; text-align: center;
}.box2 .content{ display: inline-block; height: auto; line-height:1; width: 400px; background: #ccc;
}

3、:before + inline-block

适用情景：多对象的CSS垂直居中技巧

:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。

<h2>3.:before + inline-block</h2><div class="box box3">
 <div class="content"></div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center;
}.box::before{ content:''; display: inline-block; height: 100%; width: 0; vertical-align: middle;
}.box .content{ width: 400px; background: #ccc; display: inline-block; vertical-align: middle;
}

4、absolute + margin 负值

适用情景：多行文字的垂直居中技巧

谁说绝对定位要少用？Amos认为没有少用多用的问题，重点在于你是否有妥善运用才是重点，绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了，此方法可是自古以来流传多年的居中方式呢？

<h2>4.absolute + margin 負值</h2><div class="box box4">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
}.box4 .content{ width: 400px; background: #ccc; height: 70px; position: absolute; top:50%; left: 50%; margin-left: -200px; margin-top: -35px;
}

5、absolute + margin auto

适用情景：多行文字的垂直居中技巧

又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。但此方式的缺点是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。

<h2>5.absolute + translate(-50%, -50%)</h2><div class="box box5">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
}.content{ width: 400px; background: #ccc; height: 70px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}

6、absolute + translate

适用情景：多行文字的垂直居中技巧

在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。（css3好棒）

<h2>6.absolute + margin: auto</h2><div class="box box6">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative;
}.box5 .content{ width: 400px; background: #ccc; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);
}

7、Flex + align-items

适用情景：多行文字的垂直居中技巧

Flex！这东西自从面世之后就不断的考验网页开发者的良心，到底要不要抛弃float拥抱flex，我想这答案人人心中自由一把尺，但先碰Flex再碰Float可谓先甜后苦，这顺序到底要倒吃甘蔗还是正吃甘蔗是实在难说，自从有了Flex之后，小孩考试一百分，设计网页不跑版，客户网页都RWD，老板赚钱好开心，我也加薪（加班）好甘心，不由的说Flex真的是一个神物，我们只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了（说那么多结果重点就一行字是哪招啦），这个方式的优点是此层不需要设定高度即可自动居中，且原始代码干净无比，真的是用一次就让你升天啦。

<h2>7.Flex + align-items</h2><div class="box box7">
 <div class="content">web前端开发 </div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center; align-items: center; 
}.content{ width: 400px; background: #ccc;
}

8、Flex + :before + flex-grow

适用情景：多行文字的垂直居中技巧

Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成，这个例子中Amos适用了flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空间的特性，把它设定成一半的剩余空间就能做到把内容数据准确的推到垂直中间位置，算是个传统技法的延伸方式。这样的话上面第七个方式不是比较快？

<h2>8.Flex + before + flex-grow</h2><div class="box box8"> <div class="content">web前端开发</div></div>

h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-direction: column; align-items: center;
}.box:before{ content: ''; flex-grow: .5;
}.content{ width: 400px; background: #ccc;
}

9、Flex + margin

适用情景：多行文字的垂直居中技巧

继续用Flex来居中，由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中

<h2>9.Flex + margin</h2><div class="box box9">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex;
}.content{ width: 400px; background: #ccc; margin: auto;
}

10、Flex + align-self

适用情景：多行文字的垂直居中技巧

align-self 应该大家都不陌生，基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。

<h2>10.Flex + align-self</h2><div class="box box10">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center;
}.content{ width: 400px; background: #ccc; align-self: center
}

11、Flex + align-content

适用情景：多行文字的垂直居中技巧

在正常的状况下，align-content 仅能对次轴多行flex item做居中，但是当我今天子层元素不确定有多少个时，且有时可能会有单个的情况出现时，此技巧就能用到了（当然你也能有其他解法），既然是多行子元素才能用，那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中

 <h2>11.Flex + align-content</h2><div class="box box11">
 <div class="content">web前端开发 </div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
}.content{ width: 400px; background: #ccc;
}.box11:before,.box11:after{ content: ''; display: block; width:100%;
}

12、Grid + template

适用情景：多行文字的垂直居中技巧

CSS Grid最令人惊讶的就是这个template的功能了，简直就是把块元素当画布在使用，我们仅需要把模板设置成三列，就能搞定垂直居中了

<h2>12.Grid + template</h2><div class="box box12">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr; grid-template-areas: 
 '. . .'
 '. amos .'
 '. . .';
}.content{ width: 400px; background: #ccc; grid-area: amos;
}

13、Grid + align-items

适用情景：多行文字的垂直居中技巧

align-items不仅是Flex可用，连CSS Grid也拥有此属性可使用，但在Flex中align-items是针对次轴cross axis作对齐，而在CSS Grid中则是针对Y轴做对齐，你可以把它想象成是表格中储存单元格的vertical-align属性看待，就可以很好理解了

<h2>13.Grid + align-items</h2><div class="box box13">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-items: center; 
}.content{ width: 400px; background: #ccc;
}

14、Grid + align-content

适用情景：杜航文字的垂直居中技巧

CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差，所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中，丝毫不费力气

<h2>14.Grid + align-content</h2><div class="box box14">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-content: center; 
}.content{ width: 400px; background: #ccc;
}

15、Grid + align-self

适用情景：多行文字的垂直居中技巧

align-self 应该大家都不陌生，基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中的目的了

<h2>15.Grid + align-self</h2><div class="box box15"> <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center;
}.content{ width: 400px; background: #ccc; align-self: center;
}
<h2>16.Grid + place-items</h2><div class="box box16">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-items: center;
}.content{ width: 400px; background: #ccc;
}

17、Grid + place-content

适用情景：多行文字的垂直居中技巧

place-content这属性有多少人用过，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中了

<h2>17.Grid + place-content</h2><div class="box box17">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-content: center;
}.content{ width: 400px; background: #ccc;
}

18、Grid + margin

适用情景：多行文字的垂直居中技巧

继续用Grid来居中，由于Grid元素对空间解读的特殊性，我们只要在父层元素设定display:grid，接着在需要垂直居中的元素上设置margin:auto即可自动居中。怎么这描述似曾相识。

<h2>18.Grid + margin</h2><div class="box box18">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid;
}.content{ width: 400px; background: #ccc; margin:auto;
}

19、Display：table-cell

适用情景：多行文字的垂直居中技巧

这一招我想有点年纪的开发者应该都有看过，当然像我这么嫩的开发者当然是第一次看到啦，这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中

<h2>19.display: table-cell</h2><div class="box box19">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center; display: table-cell; vertical-align: middle;
}.content{ width: 400px; background: #ccc; margin: auto;
}

20、calc

适用情景：多行文字的垂直居中技巧

Cale是计算机英文单词calculator的缩写，这个由微软提出的css 方法，真的是网页开发者的一个福音。

我们竟然可以在网页中直接做计算，这真是太猛了，从此我们再也不用在那边绞尽脑汁的数学计算了，或是想办法用js来动态计算，我们可以很轻松的利用calc()这个方法，来将百分比及时且动态的计算出实际要的是什么高度，真可谓是划时代的一个方法啊，但这个方法需要注意的是大量使用的话，网页性能会是比较差的，所以请谨慎使用。

<h2>20.calc</h2><div class="box box20">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto;
}.content{ width: 400px; background: #ccc; position: relative; top:calc((100% - 70px) / 2); margin:auto; height: 70px;
}

21、Relative + translateY

适用情景：多行文字的垂直居中技巧

这个技巧是利用了top:50%的招式，让你的元素上方能产生固定百分比的距离，接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求，translate是一个很棒的属性，由于translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得方便很多。

<h2>21.relative + translateY(-50%)</h2><div class="box box21">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto;
}.content{ width: 400px; background: #ccc; position: relative; top: 50%; transform: translateY(-50%); margin: auto;
}

22、padding

适用情景：多行文字的垂直居中技巧

什么！这也算垂直居中技巧，连我奶奶都知道这方式吧

对的，这的确也算是一种垂直居中的方式，不可讳言的这方式真的是简单过头了，以至于有些开发者认为这种方式都不能算是一种垂直居中的技巧，但同样的你无法反驳的是，我的数据的确垂直居中啦，好啦，就当我硬凹吧，你说的对，好吧

<h2>22.padding</h2><div class="box box22">
 <div class="content">web前端开发</div></div>
h2{ text-align: center;
}.box{ width: 500px; border: 1px solid #f00; margin: auto; height: auto; padding: 50px 0;
}.content{ width: 400px; background: #ccc; margin: auto;
}

23、Write-mode

适用情景：多行文字的垂直剧种技巧

这个方式应该是比较少见到的有人使用的了，这个想法是被老友Paul所激发的，write-mode这个css属性的功能基本上跟垂直居中是八竿子打不着，它的用途是改变文字书写的方向从横变竖，且支持度从很早期的IE5就有支持了，但当时Amos很少使用，一来是网页多是横书较多，另外当时除了IE浏览器意外，其他浏览器的支持度都不是很好，也就很少使用了。

使用write-mode将一整个文字容器变成直书，接着将此容器利用text-align:center来达到垂直居中的目的，白话一点的解说就是，你把原本横排的文字变成竖排，所以原本横排用到的水平对齐方式，就变成了控制直排的中间了，原理就是这么简单。

但要特别注意的是浏览器对此语法的支持度来说，需要拆开写法才行，不然某些浏览器的语法不同，可能会让你的网页在某些浏览器上看起来无效，这会是最需要注意到的

<h2>23.writing-mode</h2>立马来看Amos实际完成的<div class="box box23">
 <div class="content">
 <div class="txt">web前端开发 </div>
 </div></div>
h2{ text-align: center;
}.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; writing-mode: tb-lr; /* for ie11 */
 writing-mode: vertical-lr; text-align: center; margin:0 auto;
}.content{ width: 400px; background: #ccc; display: inline-block; /* for ie & edge */
 width: 100%; writing-mode: lr-tb; margin: auto; 
 text-align: left;
}.box .txt{ width: 80%; margin: auto;
}

看完了这23种css垂直居中写法，不知道你用过哪几种呢？是否你也有不为人知的小技巧呢？留言区里欢迎你的分享。