一文大白話講清楚CSS元素的水平居中和垂直居中

• 先說為啥就要講居中，不講別的，因為很簡單，因為居中常用且關(guān)鍵
• 那講一個元素居中，先得看這個元素是個什么貨色了吧
• 一般有兩種貨色，

1. 元素的寬高已知
2. 元素的寬高未知

• 為啥這么分，因為寬高已知的號操作啊，我都知道你多大了，然后頁面就那么大，如果你不居中我就移動唄，移動到居中
• 剩下的不知道寬高的，那沒法移啊，不知道移到哪合適，那就要另外另外想辦法了
• 所以，先講寬高已知的

1.已知元素寬高的居中方案

1.1 利用定位+margin:auto

• 上代碼

<style>.parent{width: 300px;height: 300px;border: 1px solid green;position: relative;}.child{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
<div class="parent"><div class="child"></div>
</div>

• 父元素設(shè)置相對定位，子元素設(shè)置絕對定位，并且子元素的4個定位屬性都設(shè)置為0，這時候如果子元素沒有寬高，會被拉滿父元素
• 但是這時候他有寬高，所以它顯示100x100,但是這時候子元素的虛擬占位已經(jīng)撐滿了整個父級，如果我們再給一個margin:auto他就可以上下左右都居中了。
• 哪有又問了，憑啥margin：auto就居中了，要是不給auto，給個margin: 10 50 50 10呢。
• 那就會按照這個margin去排列。
• 說白了就是這么個意思，現(xiàn)在父元素下子元素的虛擬占位跟父元素一樣大，然后我們把子元素的位置放進去，放進去因為不一樣大，就要考慮跟父元素哪個邊近一點。有可能哪個都想近一點，哪個都想遠一點，那怎么辦，auto，你們自己看著分吧，看著分怎么分，平分唄。所以居中了。
• 明白了沒有。

1.2 利用定位+margin負值

• 直接上代碼

<style>.parent{width: 300px;height: 300px;border: 1px solid green;position: relative;}.child{width: 100px;height: 100px;background-color: red;position: absolute;top:50%;left: 50%;margin-top: -50px;margin-left: -50px;}
</style>
<div class="parent"><div class="child"></div>
</div>

• 這個啥意思，這個好理解，就是我先把你top：50%，left：50%,如果子元素寬高小到極限的話是不是已經(jīng)居中了，但是現(xiàn)在你有寬度各位一百，那怎么辦，我在倒著往回移元素本身的一半不就OK了
• 上圖
  

1.3 table布局

• 設(shè)置父元素的display：table-cell，子元素設(shè)置display:inline-block,利用vertical和text-align讓所有行內(nèi)塊級元素水平垂直居中
• 上代碼

<style>.parent{display:table-cell;width: 300px;height: 300px;vertical-align:middle;text-align: center;border: 1px solid black;}.child{display:inline-block;width: 100px;height: 100px;background-color: red;}
</style>
<div class="parent"><div class="child"></div>
</div>

2.未知元素寬高的居中方案

2.1利用定位+transform

• 這個跟定位+margin-負值用法是一樣的
• 只不過margin-負值的時候我們需要負元素寬高的一半，所以我們必須先知道寬高是多少，然后才能寫
• transform的也是負值，不過translate會自動獲取元素的寬高，并以元素的寬高為基準(zhǔn)進行百分比偏移，所以我們可以設(shè)定偏移量為元素寬高的50%
• 上代碼

<meta charset="utf-8">
<style>.parent{width: 300px;height: 300px;border: 1px solid green;position: relative;}.child{background-color: red;position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);/*用位移代替margin進行偏移了*//*margin-top: -50px;*//*margin-left: -50px;*/}
</style>
<div class="parent"><div class="child">我是子元素，我沒有設(shè)置寬高</div>
</div>

• 搞定
  

2.2 flex彈性布局

• 這個最簡單，只要父元素設(shè)置display：flex，子元素通過justify-content：center和align-items：center輕松實現(xiàn)居中

<meta charset="utf-8">
<style>.parent{width: 300px;height: 300px;border: 1px solid green;display: flex;align-items:center;justify-content:center;}.child{background-color: red;}
</style>
<div class="parent"><div class="child">我是子元素，我沒有設(shè)置寬高</div>
</div>

• 搞定
  

2.3 grid網(wǎng)格布局

• grid網(wǎng)格布局和flex彈性布局用法一毛一樣,但是兼容性差
• 直接上代碼

<meta charset="utf-8">
<style>.parent{width: 300px;height: 300px;border: 1px solid green;display: grid;align-items:center;justify-content:center;}.child{background-color: red;}
</style>
<div class="parent"><div class="child">我是子元素，我沒有設(shè)置寬高</div>
</div>

3. 內(nèi)聯(lián)元素的居中布局

• 上面講的都是塊級元素的居中方式，下面講內(nèi)聯(lián)元素的

1. 水平居中

• 行內(nèi)元素可設(shè)置text-algin：center

<meta charset="utf-8">
<style>.parent{width: 500px;height: 300px;text-align: center;background-color: green;}.child{background-color: red;}
</style>
<div class="parent"><span class="child">我是子元素，我是內(nèi)聯(lián)元素<br>我的水平居中只需要父元素text-align：center就行</span></div>

• 如果子元素的布局是flex，則父元素的justify-content：center就行

<meta charset="utf-8">
<style>.parent{width: 300px;height: 300px;background-color: green;display: flex;justify-content:center}.child{background-color: red;line-height: 300px;}
</style>
<div class="parent"><span class="child">我是子元素，我是內(nèi)聯(lián)flex元素<br>我的水平居中只需要父元素justify-content:center就行</span>
</div>

2. 垂直居中

• 單行文本垂直居中，只需要讓子元素的line-height=父元素的height

<meta charset="utf-8">
<style>.parent{width: 600px;height: 300px;background-color: green;display: flex;justify-content:center;}.child{width: 400px;background-color: red;line-height: 300px;}
</style>
<div class="parent"><span class="child">單行文本，垂直居中l(wèi)ine-height=父height</span>
</div>

• 多行文本父元素垂直居中，可以設(shè)置父元素display：table-cell,vertical-align:middle

<meta charset="utf-8">
<style>.parent{width: 600px;height: 300px;background-color: green;display:table-cell;vertical-align:middle;}.child{width: 400px;background-color: red;}
</style>
<div class="parent"><span class="child">我是多行文本，垂直居中只需要讓父元素display：table-cell；vertical-align:middle</span>
</div>