這裡是修真院前端小課堂，每篇分享文從
本篇分享的是：【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
文字垂直居中
2、使用padding
.padding
使用padding垂直居中
3、使用table
.table
.child2
多行文字垂直居中多行文字垂直居中文多行本垂直居中文字
4、使用flex
.flex
.child1
5、使用position與transform
.transform
.child3
6、position與margin：auto
.margin
.child4
7、line-height結合vertical:middle實現多行文字居中
.vertical
.child5
多行文字垂直居中多行文字垂直居中文多行本垂直居中文字多行文字垂直居中
（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的相同定位值。
菜鳥教程css 布局 - 水平 & 垂直對齊
菜鳥教程flex布局
q1：問題：padding可以實現垂直居中，為什麼不推薦用margin呢？
a1：回答：使用margin有重疊外邊距的可能性，所以不推薦，某些情況也可以用，但要主要外邊距重疊的問題。
q2：問題：為什麼在結合position定位時，使用transform：translate（-50%，-50%）可以讓元素居中，-50%代表什麼？
a2：回答：translate偏移的百分比值是相對於自身大小的，-50%就是對自身偏移50%的寬高。
q3：問題：使用margin：auto實現水平居中時需要注意什麼？
a3：回答：元素需為定寬的塊級元素。
CSS中有哪些方法可以實現垂直居中？
幾種常用到的垂直居中方法 行內元素 單行 行內元素 1.一般用line height來實現垂直居中,用text ailgn實現水平居中 多行 行內元素 1.用 的vertical align來實現垂直居中 2.用flex彈性布局 塊級元素 1.通過padding實現垂直居中 2.flex布局實現垂直...
中有哪些方法可以實現垂直居中（二）
這裡是修真院前端小課堂，每篇分享文從 css中有哪些方法可以實現垂直居中 二 2.知識剖析 垂直居中就是豎向居中 下面我們一起來討論一下實現垂直居中的方法。3.常見問題 css有哪些方式可以實現垂直居中 4.解決方案 1 單行文字垂直居中方法 該方式適用於情況比較簡單的單行文字，只需要簡單地把 li...
css 有哪些方式可以實現垂直居中
css 有哪些方式可以實現垂直居中 居中是前端排版的乙個重要話題，今天我們就來梳理一下垂直居中的方法。布局的解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性 flexbox，咱們就從這幾點入手。垂直居中的方式？html 如下 nihaoa 預設的 css ...