CSS常用布局实现02-垂直居中

1. 简介

css2.1本身没有提供垂直居中的属性，都是通过一些巧妙的方法来实现，当然，都会有或多或少的缺点。所以，还是那句话，如果不考虑兼容到特定的浏览器，建议使用flex和grid。现在的浏览器升级换代非常快，不要把自己局限于消除兼容性bug之中。很可能你今天掌握的hack方法明天就彻底失去了意义。跟着规范走。

2. 单行文本垂直居中

这种情景，只要指定line-height和height同高即可。

    
    
    




    inner content

3. 包含多文本，图片或者其他内容的元素居中

一些方法在此我不想介绍，会在下一篇水平垂直居中文章中选择性提到。在此强烈推荐flex和grid的实现方式。
方法1： flex。使用align-items: center即可

    
    
    




    
inner content

方法2：grid布局

    
    
    




    
inner content

可以看到和flex的不同点在于inner的宽度。当然这个宽度是可以显示设置的。