CSS中有哪些方法可以實現垂直居中？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【CSS中有哪些方法可以實現垂直居中？ 】
標題：
CSS中有哪些方法可以實現垂直居中？
開場語：
大家好，我是IT修真院深圳分院第15期的學員鄒志程，一枚正直純潔善良的程式設計師，今天給大家分享一下，修真院官網Web任務八，深度思考中的知識點——CSS中有哪些方法可以實現垂直居中？
（1）背景介紹：
在前端開發過程中，對頁面進行佈局時，除了CSS水平居中的需求外，還會經常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一樣都是前端工程師的基本功。
（2）知識剖析：
幾種常用到的垂直居中方法：
1、頭部和頂部使用相同大小的padding值可以實現居中。
2、單行文字可以用line-height實現垂直居中，設定子元素的line-height值等於父元素的height，這種方法適用於子元素為單行文字的情況。
3、通過display:flex，align-items: center;或 align-self: center;實現垂直居中。
4、使用position、transform實現元素垂直居中。
5、使用position結合margin：auto實現垂直居中。
6、使用 display :table和 vertical-align 對容器裡的文字進行垂直居中, 父元素使用display:table,子元素使用display:table-cell屬性來模擬表格，子元素設vertical-align:middle即可垂直居中。
7、通過verticle-align:middle實現行內垂直居中。
（3）常見問題：
1、使用line-height設定垂直居中時，為什麼設定line-height:100%不管用？
2、verticle-align:middle相對父元素不能垂直居中？
（4）解決方案：
1、 從官方文件看linr-height設定百分比是基於當前字型尺寸的百分比，所以這裡的百分比是不是相對父元素而言的，而是相對於字型尺寸的， 所以想要用line-height垂直居中，值不能設為100%，需設定跟當前父元素高度值。
2、vertical-align只作用於在同一行內的元素，它需要根據同一行找到參照的基線，而一個Box中由很多行很多元素組成， 它的垂直並不是相對於整個Box而言的，所以使用vertical-align:middle時不能對齊到父元素最中央的位置。 解決方法是定義一個同級的行內元素，讓這個元素找到基線，或者配合line-height父元素內設定行高和box的高度一樣，box內就只有一行，這時verticle-align:middle就能生效了。
（5）編碼實戰：
1、使用line-height
.line-height{
width: 200px;
height: 300px;
background-color: #29bde0;
line-height: 300px;
}
<div class="line-height">
<p >文字垂直居中</p>
</div>
2、使用padding
.padding{
margin-top: 50px;
padding: 100px 0;
width: 300px;
background-color: #29bde0;
}
<div class="padding"><p>使用padding垂直居中</p></div>
3、使用table
.table{
width: 200px;
height: 300px;
background-color: #29bde0;
display: table;
}
.child2{
display: table-cell;
vertical-align: middle;
}
<div class="table">
<span class="child2">多行文字垂直居中多行文字垂直居中文多行本垂直居中文字</span>
</div>
4、使用flex
.flex{
width: 400px;
height: 200px;
background-color: #29bde0;
display: flex;
align-items: center;
text-align: center;
}
.child1{
width: 100px;
height: 100px;
background-color: green;
}
<div class="flex">
<div class="child1"></div>
</div>
5、使用position與transform
.transform{
width: 400px;
height: 200px;
background-color: #29bde0;
position: relative;
}
.child3{
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="transform">
<div class="child3"></div>
</div>
6、position與margin：auto
.margin{
width: 400px;
height: 200px;
background-color: #29bde0;
position: relative;
}
.child4{
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
<div class="margin">
<div class="child4"></div>
</div>
7、line-height結合vertical:middle實現多行文字居中
.vertical{
background-color: #29bde0;
width: 400px;
height: 200px;
line-height: 200px;
}
.child5{
background-color: yellow;
width: 150px;
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
<div class="vertical">
<div class="child5"><p>多行文字垂直居中多行文字垂直居中文多行本垂直居中文字多行文字垂直居中</p></div>
</div>
（6）拓展思考：
在實現垂直居中的情況下，怎樣讓元素水平方向也居中？
常用到的水平居中：
1、行內元素水平方向居中text-aligh
2、定寬塊級元素，給元素設定margin:0 auto實現水平居中。
3、彈性佈局下父元素新增：justify-content: center;
4、position結合transform時：水平方向left:50%，再用translate X軸方向偏移-50%
5、使用position結合margin時：水平方向新增left和right的相同定位值。
（7）參考文獻：
【1】菜鳥教程CSS 佈局 - 水平 & 垂直對齊 http://www.runoob.com/css/css-align.html
【2】菜鳥教程flex佈局 http://www.runoob.com/w3cnote/flex-grammar.html
（8）更多討論：
Q1：問題：padding可以實現垂直居中，為什麼不推薦用margin呢？
A1：回答：使用margin有重疊外邊距的可能性，所以不推薦，某些情況也可以用，但要主要外邊距重疊的問題。
Q2：問題：為什麼在結合position定位時，使用transform：translate（-50%，-50%）可以讓元素居中，-50%代表什麼？
A2：回答：translate偏移的百分比值是相對於自身大小的，-50%就是對自身偏移50%的寬高。
Q3：問題：使用margin：auto實現水平居中時需要注意什麼？
A3：回答：元素需為定寬的塊級元素。
（9）鳴謝：
感謝韓鵬師兄，此教程是在他們之前技術分享的基礎上完善而成。
（10）結束語：
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地