我们在编辑一个布局，通常使用水平居中和垂直居中来设计，而水平居中好办，无非就是设置margin:0auto;或者text-align:center;，可以轻松解决水平居中的问题，但最头疼的对齐问题一直是“垂直居中”这个烦人的设置。下面将单独介绍七种使用CSS实现垂直居中的方法。垂直居中的七种方式设置行高（line-height）添加伪元素calc动态计算使用表格或假表格变换绝对定位使用Flexbox设置行高（line-height）设置行高是最简单的垂直居中方法适用于“单行”的“行内元素”（inline、inline-block），比如单行的标题，或者已经设置了inline-block属性的div。如果line-height设置为与height相同的值，那么内容的inline元素会垂直居中，因为是行高，所以inline的上下各增加1/2的行高元素，所以它是垂直居中的！但是从这里我们可以看出为什么需要单行的内联元素，因为如果有多行，第二行和第一行的距离就会变得过大，这不是我们预期的效果。CSS示例：.div0{width:200px;高度：150px；边框：1px实心#000；行高：150px；text-align:center;}.redbox{display:inline-block;宽度：30px；高度：30px;background:#c00;}添加伪元素(::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加到bar里，让这个“伪”div的高度为100%，就可以轻松让其他div居中了。但是却又不是！div记得设置显示为inline-block。毕竟，vertical-align:middle;是针对行内元素的，而div本身就是一个块，所以一定要改！.div0::before{内容：'';宽度：0；高度：100%；显示：内联块；职位：相对；会有疑惑，如果今天我的div一定是一个block，那怎么让它垂直居中呢？这时候就必须借助CSS特有的calc动态计算能力。我们只需要让div的top属性居中，距离top的距离为“外框高度的50%+div高度的50%”。垂直居中，至于为什么不用margin-top，因为margin是相对于水平宽度的，必须用top才正确。.div0{宽度：200px;高度：150px；border:1pxsolid#000;}.redbox{宽度:30px;高度：30px；背景：#c00；向左飘浮;顶部：计算（50%-15px）；-left:calc(50%-45px);}.greenbox{宽度:30px;高度：80px；背景：#0c0；向左飘浮;top:calc(50%-40px);}.bluebox{宽度:30px;高度：40px；背景：#00f；向左飘浮;top:calc(50%-20px);}使用表格或伪装表格可能有人会发现，在表格HTML中常用的DOM中，要实现垂直居中很容易，只需要下一行vertical-align:middle，为什么？主要原因是table的显示是table，而td的显示是table-cell，所以除了直接使用table之外，我们还可以将元素的父元素的显示改为垂直居中table-cell，可以轻松实现，但是修改显示有时会引起其他样式属性的联动效果，需要谨慎使用。HTML:
表格垂直居中 |