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水平垂直居中的方法。我这边就列举出几种上面博客中没有提到的垂直居中的方法。

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

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