flex垂直居中：
第一種：使用flex布局，讓居中元素的父元素為flex屬性,讓它在交叉軸上center就可以達到居中效果了：
html代碼:
<div class="father"><p>我要垂直居中</p> </div>css代碼:
.father {display:flex;align-items: center;background:grey;height:100vh;
}flex水平垂直居中:
html代碼:
<div class="father"><p>我要垂直居中</p> </div>css代碼:
.father {display:flex;align-items: center; //交叉軸justify-content:center; //主線background:grey;height:100vh;
}第二種：使用position + transform，實現垂直居中：
.father {background:grey;height:100vh;position: relative;
}p{position: absolute;top:50%; //50%并不是居中的，因為它是以元素的上border為標準移動50%的transform:translateY(-50%) //所以我們需要像上移動元素自身高度一半兒的距離
}使用position + transform，實現水平垂直居中：
.father {background:grey;height:100vh;position: relative;
}p{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}第三種:讓文字垂直居中：
p{background-color:red;height:30px;line-height:30px;
}設置的高度和行高一樣即可達到水平居中；
p{background-color:red;padding:30px 0;
}不要設置高度（一定不要），使用內邊距改變元素的寬度同時讓文字達到居中效果，
第4種：使用position + calc,實現垂直居中和水平垂直居中：
.father {background:grey;height:100vh; position: relative;
}p{background-color:red;position: absolute;width:100px;height:50px;top:calc(50% - 25px)
}和上面position + transform類似，只不過css3提供了calc這個屬性可以直接計算距離
但是一定要給元素定上寬高，這樣我們在計算時就比較好計算，下面是水平垂直居中：
.father {background:grey;height:100vh; position: relative;
}p{background-color:red;position: absolute;width:100px;height:50px;top:calc(50% - 25px);left:calc(50% - 50px)
}第5種：使用絕對定位 + margin來實現垂直居中：
.father {background:grey;height:100vh; position: relative;
}p{width:100px;height:100px;background-color:red;position: absolute;top:0;bottom:0;margin:auto;
}一定要定寬高；這樣這樣我們在margin：auto時寬高才不會被因為脫離文檔流而導致拉伸到和父元素一樣大；
同樣我們使用這樣的方法達到垂直水平居中；
.father {background:grey;height:100vh; position: relative;
}p{width:100px;height:100px;background-color:red;position: absolute;top:0;bottom:0;left:0right:0;margin:auto;
}絕對定位后同時讓元素4面都為0；然后使用margin:auto;即可達到水平垂直劇中的效果；
第六種，display: table-cell 實現多行文字垂直居中：
<div class="father"><div class="son">我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中</div></div>//CSS代碼
.father {display: table-cell;vertical-align: middle;height: 100vh;background: grey;}.son {width: 200px;
}在我們CSS布局的過程中經常遇到，多行文字需要居中的問題；這時我們就可以使用，單元格的形式，讓文字居中，注意， vertical-align: middle;要寫在設置了單元格的元素上才行；
第7種，使用vertical-align，實現垂直居中以及元素的對齊；
vertical-align這個屬性要求元素必須是inline或者inline-block元素才行；經常會遇到使用該屬性沒有效果，一般因為元素的性質發生了變化；例如元素為block,浮動,絕對定位等原因導致的。
<div class="father"><div class="son">我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，我要垂直居中我是多行文字，</div><img src="https://cdn2.ettoday.net/images/4031/d4031158.jpg" width=200></div>.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid;
}img {border: green 1px solid;
}
首先我們可以看到容器里有兩個inline-block元素，但是可以看到文字并沒有和圖片頂部對齊，而且可以看到，圖片的下方是有一塊留白的；這是為啥呢? 因為所有的inline 和 inline-block元素都自帶了vertical-align屬性，默認是base-line對齊，而且是以文字流的 base-line對齊，因為文字的基線比圖片低，所以圖片為了強行對齊，導致了下面的空白，這里解決辦法有兩種，第一個改變對齊方式，第二個,因為行高和vertical-align是一對好基友，行高設置為0也是可以解決該問題，前提是有自身高度，不然文字會縮成一行
.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid; vertical-align: middle;
}img {border: green 1px solid;vertical-align: middle;
}
這樣可以讓文字近似垂直居中，因為是近似，一般不建議直接middle, 使用vertical-align: top;加margin-top的形式會讓我們不出現bug，
.father {background: grey;
}.son {width: 200px;display: inline-block;border: red 1px solid; vertical-align: top;margin-top: 25px;
}img {border: green 1px solid;vertical-align: top;
}當然還有很多辦法可以達到居中效果，但都大同小異，這里就不一一列舉了，這里最推薦的還是使用flex布局達到的居中效果，兼容性最好，如果能學會flex布局,基本上大部分布局問題都可以解決了。
返回列表為0)
