CSS实现水平垂直居中的方法总结

在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;
        }
    }
}