在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中 戳这里。
在这里我强烈推荐这篇文章的原因是：整篇文章的逻辑结构非常清晰。我之前也看过不少CSS实现垂直居中相关的博客，很多博客的总结也是非常齐全，但总有点看过就忘了，逻辑性不是很强的感觉。下面我们来介绍一下实现垂直居中的多种方法：
目录：
> * 1.水平居中1.1行内元素（inline-* 系列的元素包括inline、inline-block、inline-table、inline-flex）1.2块级元素1.3多个块级元素> * 2.垂直居中2.1行内元素2.1.1单行文本2.1.2多行文本2.2块级元素2.2.1知道高度2.2.2不知道高度2.3使用flex布局> * 3.水平垂直居中3.1固定高度和宽度3.2不知道高度和宽度3.3使用flex布局3.4使用Grid布局复制代码
由于上面那篇博客 戳这里 上已经详细的讲解了CSS水平垂直居中的方法。我这边就列举出几种上面博客中没有提到的垂直居中的方法。
1、Grid布局实现垂直居中（一篇很棒的介绍Grid布局的文章）戳这里
第一种Grid布局实现垂直居中的方法：
html代码：<div class="grid"><div class="parent"><div class="child"><p>CSS实现垂直居中的5种思路 - 小火柴的蓝色理想 - 博客园</p></div></div></div>CSS代码：.grid .parent {display: -moz-grid;display: -webkit-grid;display: -ms-grid;display: grid;<!--下面的两种方法均可-->align-items: center;/*align-content: center;*/}复制代码
第二种Grid布局实现垂直居中的方法
html代码：<div class="grid2"><div class="parent"><div class="child"><p>CSS实现垂直居中的5种思路 - 小火柴的蓝色理想 - 博客园</p></div></div></div>CSS代码：.grid2{.parent{display: grid;.child{align-self:center;//margin: auto 0;}}}复制代码
2、flex布局实现垂直居中
第一种flex布局实现垂直居中的方法：
HTML代码：<div class="flex"><div class="parent"><div class="child"><p>CSS实现垂直居中的5种思路 - 小火柴的蓝色理想 - 博客园</p></div></div></div>CSS代码：.flex{.parent{display: flex;align-items: center;}}复制代码
第二种flex布局实现垂直居中的方法：
HTML代码：<div class="flex"><div class="parent"><div class="child"><p>CSS实现垂直居中的5种思路 - 小火柴的蓝色理想 - 博客园</p></div></div></div>CSS代码：.flex{.parent{display: flex;.child{margin: auto 0;}}}复制代码
