本文转自微信公众号--前端达人我之所以整理这类题材的手册，是因为CSS相关的内容太零散，而且在同时，它还夹杂着相关的兼容性问题。遇到问题时，我们有时会过于依赖搜索引擎来验证和解决问题，而没有在解决问题后进行认真的归纳和结论。当我们再次遇到这种问题时，我们可能还不知道。这就是我总结这本手册的目的。我将日常工作中经常用到的高频CSS相关方法总结成这本手册（部分内容可能出自其他作者），欢迎大家继续订阅和关注。今天就来梳理一下CSS垂直居中的几种方法。我们在布局页面时，通常会使用水平居中和垂直居中。很容易处理水平居中。无非是设置margin:0auto;或者是text-align:center;，可以轻松解决水平居中的问题，但是最头疼的对齐问题一直是“垂直居中”。下面将介绍七种单独使用CSS实现垂直居中的方法，一点都不难（当然比水平居中要难一些），只要理解背后的原理就可以轻松应用。这篇文章的阅读时间预计为5分钟。01设置行高（line-height）设置行高是垂直居中最简单的方法。适用于“单行”的“行内元素”（inline、inline-block），比如单行的标题，或者已经设置了inline-block属性的div，如果line-height为设置为与高度相同的值，内容的行内元素将垂直居中。因为是行高，行内元素的上下都会加上1的行高/2，所以垂直居中！但是从这里我们可以看出为什么需要单行的内联元素，因为如果有多行，第二行和第一行的距离就会变得过大，这不是我们预期的效果。CSS实例：外层div0，内容redbox，让redbox水平垂直居中。.div0{宽度：200px;高度：150px；边框：1px实心#000；行高：150px；text-align:center;}.redbox{display:inline-block;宽度：30px；高度：30px；#c00;}02添加伪元素（::before,::after）只是第一种方法，虽然是最简单的方法（适用于单行标题），但也只能是单行，所以如果我们想让多行元素也可以垂直居中，这就需要使用伪元素。在此之前，让我解释一下CSS中的vertical-align属性。虽然这个属性是垂直居中的，但它意味着元素中的所有元素相互垂直居中，而不是相对于外框的高度垂直居中。（下面的CSS会像这样造成垂直居中）.div0{width:200px;高度：150px；边框：1px实心#000；text-align:center;}.redbox{宽度:30px;高度：30px；背景：#c00；显示：内联块；vertical-align:middle;}.greenbox{宽度:30px;高度：60px；背景：#0c0；显示：内联块；vertical-align:middle;}.bluebox{宽度：30px;高度：40px；背景：#00f；显示：内联块；vertical-align:middle;}因此，如果一个块的高度变为100%，那么其他块将真正垂直居中。.greenbox{宽度：30px;高度：100%；背景：#0c0；显示：内联块；vertical-align:middle;}但我们不能总是在每次想要垂直居中时在其中添加一个奇怪的div！所以我们只好动动脑筋去“伪元素”，用::before和::after将div添加到frame中，让这个“伪”div的高度为100%，就可以轻松让其他div居中了。但是却又不是！div记得设置显示为inline-block。毕竟vertical-align:middle是针对行内元素的，而div本身就是一个块，所以要改！.div0::before{内容：'';宽度：0；高度：100%；显示：内联块；职位：相对；垂直对齐：中间；background:#f00;}03calc动态计算看这里可能会有疑惑，如果今天我的div一定是一个block，那怎么让它垂直居中呢？这时候就必须借助CSS特有的calc动态计算能力。我们只需要让div的top属性居中，距离top的距离为“外框高度的50%-div高度的50%”。垂直居中，为什么不用margin-top，因为margin捕获水平高度，必须用top才正确。.div0{宽度：200px;高度：150px；border:1pxsolid#000;}.redbox{position:relative;宽度：30px；高度：30px；背景：#c00；向左飘浮;顶部：计算（50%-15px）；margin-left:calc(50%-45px);}.greenbox{position:relative;宽度：30px；高度：80px；背景：#0c0；向左飘浮;顶部：计算（50%-40px）；}.bluebox{位置：相对；宽度：30px；高度：40px；背景：#00f；向左飘浮;top:calc(50%-20px);}04使用表格或伪装成表格可能有些人会发现，在表格这个HTML中，实现垂直居中是相当容易的。你只需要下一行vertical-align:middle。为什么？主要原因是table的显示是table，而td的显示是table-cell，所以除了直接使用table之外，我们还可以将元素的父元素的显示改为垂直居中表格单元格。实现简单，但修改显示有时会引起其他样式属性的联动效果，需谨慎使用。HTML:
表格垂直居中 |