在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;}}
}
复制代码