CSS垂直居中的七个方法

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好解决，不外乎就是设定margin:0 auto；或者是text-align:center；，即可以轻松处理掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将详情七种单纯利用CSS垂直居中的方式。

七种垂直居中的方法

设定行高（line-height）

增加伪元素

calc动态计算

使用表格或者伪装表格

transform

绝对定位

使用Flexbox

设定行高（line-height）

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或者是已经设为inline-block属性的div，若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直居中，由于是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直居中了！不过由此即可以看出，为什么必需要单行的行内元素，由于假如多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。CSS示例：

增加伪元素（::before、::after）

刚刚第一种方法，尽管是最简单的方法（适用于单行标题），不过就是只能单行，所以我们假如要让多行的元素也可以垂直居中，就必需要使用伪元素的方式。在此之前，先解释一下CSS里头vertical-align这个属性，这个属性尽管是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，并不是相对于外框的高度垂直居中。（下面的CSS会造成这种样子的垂直居中）

因而，假如有一个方块变成了高度100%，那么其余的方块就会真正的垂直居中。

但是我们总不能每次要垂直居中，都要增加一个奇怪的div在里头吧！所以我们就要把脑筋动到“伪元素”身上，利用::before和::after增加div进到杠杠内，让这个“伪”div的高度100%，即可以轻松地让其余的div都居中。不过不过不过！div记得要把display设为inline-block，毕竟vertical-align:middle；是针对行内元素，div本身是block，所以必需要做更改！

calc动态计算

看到这边或者许会有疑问，假如今天我的div必需要是block，我该怎样让它垂直居中呢？这时候就必需用到CSS特有的calc动态计算的能力，我们只需让要居中的div的top属性，与上方的距离是“50%的外框高度+ 50%的div高度”，即可以做到垂直居中，至于为什么不用margin-top，由于margin相对的是水平宽度，必需要用top才会正确。

使用表格或者伪装表格

或者许有些人会发现，在表格这个HTML里面常用的DOM里头，要实现垂直居中是相当容易的，只要要下一行vertical-align:middle即可以，为什么呢？最主要的起因就在于table的display是table，而td的display是table-cell，所以我们除了直接使用表格之外，也可以将要垂直居中元素的父元素的display改为table-cell，即可以轻松达成，不过修改display有时候也会造成其余样式属性的连动影响，需要比较小心使用。

HTML：

CSS：

transform

transform是CSS3的新属性，主要掌管元素的变形、旋转和位移，利用transform里头的translateY（改变垂直的位移，假如使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，即可以做出垂直居中的效果，比较需要注意的地方是，子元素必需要加上position:relative，不然就会没有效果喔。

绝对定位

绝对定位就是CSS里头的position:absolute，利用绝对位置来指定，但垂直居中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为0，再搭配一个margin:auto，即可以办到垂直居中，不过要特别注意的是，设定绝对定位的子元素，其父元素的position必需要指定为relative喔！而且绝对定位的元素是会互相覆盖的，所以假如内容元素较多，可能就会有些问题。

使用Flexbox

使用align-items或者align-content的属性，轻轻松松即可以做到垂直居中的效果。

以上就是少量垂直居中的方法，因为垂直居中往往会动用到修改display这个属性，往往也会在排版上造成少量影响，例如不该用flexbox的地方假如用了flexbox，不该用table的地方用了table，不该用inline-block的地方用了inline-block，后续反而要多写许多其余的定位样式来修正，那就有点本末倒置了，因而如何活用这些CSS垂直居中的方法，就要看大家的版面结构而灵活运用啰！

在前台领域混了这几年，总结了一套前台学习的精讲视频和学习路线，假如有对前台开发感兴趣的伙伴，不论你是想转行，或者是大学生，还有工作中想提升自己能力的web前台党，欢迎大家的加入我的前台开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前台技术!也可以关注我的微信公众号：【前台留学生】 每天升级最新技术文章干货。

最后

看完点个赞，分享一下吧，让更多的朋友能够看到。假如你喜欢前台开发博客的分享，就给公号标个星吧，这样就不会错过我的文章了。