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;
        }
    }
}
複製代碼