幾種常用到的垂直居中方法：
行內元素;
單行 - 行內元素
1.一般用line-height來實現垂直居中,用text-ailgn實現水平居中
多行 - 行內元素
1.用**的vertical-align來實現垂直居中
2.用flex彈性布局
塊級元素
1.通過padding實現垂直居中
2.flex布局實現垂直居中
3.相對定位,絕對定位實現垂直居中
問題：使用乙個div包裹乙個img， 發現與div之間有間隙
原因:來是因為在h5文件宣告下，塊狀元素內部的內聯元素的行為表現所致，簡單地說就好像塊狀元素內部有個看不見的沒有寬度的空白節點。
而不設定vertical-align屬性，vertical-align預設是baseline。
解決方法;
1.在的類中,vertical-align:bottom;//top和bottom都可以
2.由於baseline是設定行內元素(inline)或者**單元素(table-cell)的垂直對齊方式，
所以可以將img轉換成塊級元素,display：block，
3.把父元素的font-size設為0
編碼實戰：
行內元素;
單行 - 行內元素
用line-height來實現垂直居中,用text-ailgn實現水平居中
.box
.box-inline
行內單行文字居中
多行 - 行內元素
1.用**的vertical-align來實現垂直居中
style type=「text/css」>
.father
.son
2.用flex彈性布局
塊級元素
1.通過padding實現垂直居中
.aa.bb
.cc塊級元素,背景藍色,內容文字紅色,設定padding:100px實現垂直居中
塊級元素,背景藍色,內容文字紅色,設定padding:100px實現垂直居中
2.flex布局
flex.html
(父元素有固定的寬高,自適應子元素居中)
.father
.son
3.相對定位,絕對定位
1.知道父元素和資元素的寬高
.father-1
.son-1
2.知道父元素寬高,元素寬高未知(即子元素不設具體寬高由內容撐開)
.father-2
.son-2
顯示內容為子元素撐開,用文字感受更加直觀,自適應水平垂直居中,最大寬度為父元素的一半
(6）拓展思考：
html可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
在實際應用中,分門別類,對號入座,並且和可以通過
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
相互轉換靈活運用
(7）參考文獻
1.css垂直居中:
2.行內元素margin:auto為何失效:
CSS中有哪些方法可以實現垂直居中（一）？
這裡是修真院前端小課堂，每篇分享文從 本篇分享的是 css中有哪些方法可以實現垂直居中？1 背景介紹 在前端開發過程中，對頁面進行布局時，除了css水平居中的需求外，還會經常遇到css垂直居中的需求，css垂直居中跟css水平居中一樣都是前端工程師的基本功。2 知識剖析 幾種常用到的垂直居中方法 1...
中有哪些方法可以實現垂直居中（二）
這裡是修真院前端小課堂，每篇分享文從 css中有哪些方法可以實現垂直居中 二 2.知識剖析 垂直居中就是豎向居中 下面我們一起來討論一下實現垂直居中的方法。3.常見問題 css有哪些方式可以實現垂直居中 4.解決方案 1 單行文字垂直居中方法 該方式適用於情況比較簡單的單行文字，只需要簡單地把 li...
css 有哪些方式可以實現垂直居中
css 有哪些方式可以實現垂直居中 居中是前端排版的乙個重要話題，今天我們就來梳理一下垂直居中的方法。布局的解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性 flexbox，咱們就從這幾點入手。垂直居中的方式？html 如下 nihaoa 預設的 css ...