CSS垂直居中技巧，我只会23个，你会几个？

1、line-height

使用情景：单行文字垂直居中。常见于单行文字的应用，像是按钮这一类对象，或是下拉框、导航此类元素最常见到。此方式原理是在于将单行文字的行高设定后，文字就会位于行高的垂直中间位置。

2、line-height+inline-block

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

图1

3、：before+inline-block

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

图2

4、absolute + margin 负值

适用情景：多行文字的垂直居中技巧。绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了，此方法可是自古以来流传多年的居中方式呢？

图3

5、absolute + margin auto

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

图4

6、absolute + translate

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

7、Flex + align-items

8、Flex + :before + flex-grow

9、Flex + margin

我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中。

10、Flex + align-self

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

11、Flex + align-content

12、Grid + template

13、Grid + align-items

14、Grid + align-content

15、Grid + align-self

16、Grid + place-items

17、Grid + place-content

18、Grid + margin

19、Display：table-cell

原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中

20、calc+相对定位

图5

21、Relative + translateY

利用了top:50%的招式，让你的元素上方能产生固定百分比的距离，接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求。

图6

22、padding

23、Write-mode

write-mode这个css属性的功能基本上跟垂直居中是八竿子打不着，它的用途是改变文字书写的方向从横变竖。使用write-mode将一整个文字容器变成直书，接着将此容器利用text-align:center来达到垂直居中的目的，白话一点的解说就是，你把原本横排的文字变成竖排，所以原本横排用到的水平对齐方式，就变成了控制直排的中间了，

关于本文

作者：@Amos

原文：

http://csscoke.com/2018/08/21/css-vertical-align/

2018-08-25