今天去面試的時(shí)候刹衫，被問到css怎么實(shí)現(xiàn)高度不定的垂直居中醋寝，突然就懵了，之前面試的都是js相關(guān)知識(shí)带迟，發(fā)現(xiàn)css的知識(shí)自己缺少總結(jié)音羞，今天就先理一下不定高的垂直居中吧！
首先第一種：用flex布局實(shí)現(xiàn)不定高垂直居中：
html代碼：一個(gè)父div仓犬，一個(gè)子div黄选；
<div class="p">
<div class="s">
我是不定高div,需要垂直居中
我是不定高div，需要垂直居中
</div>
</div>
css代碼：父div固定高度婶肩，子div根據(jù)內(nèi)容自適應(yīng)办陷；
通過設(shè)置父div為flex，然后設(shè)置主抽和交叉軸方向center即可律歼；
.p{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
width: 300px;
background-color: #fd9927;
}
效果截圖：
缺點(diǎn)：瀏覽器兼容性不好民镜，IE10以上才能用；
第二種：position定位實(shí)現(xiàn)不定高垂直居中：
html代碼一樣险毁，直接上css代碼：
.p{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
background-color: #1e88e5;
}
.s{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
background-color: #fd9927;
}
注意父div一定要設(shè)置relative或者fixed制圈，不然的話會(huì)一直找其祖先元素搜索設(shè)置了relative或者fixed的div们童，然后根據(jù)其定位，都沒有的話是根據(jù)body定位鲸鹦；
解釋一下為啥要設(shè)置transform慧库， 因?yàn)樵O(shè)置top和left為50%是按照子div的左上定點(diǎn)實(shí)現(xiàn)定位的，這樣會(huì)導(dǎo)致子div自身的寬度和高度不在居中范圍內(nèi)馋嗜，設(shè)置transform之后齐板，將其自身的寬度和高度向上、左移動(dòng)其自身的50%葛菇，就實(shí)現(xiàn)和水平和垂直居中甘磨；
效果圖就不上了，太占地眯停，老鐵們可以自己敲一遍代碼查看效果济舆；
缺點(diǎn)：1、IE8不支持莺债；2滋觉、transform屬性需要寫瀏覽器廠商前綴；3齐邦、可能干擾其他transform效果椎侠；4、某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象侄旬；
目前知道這兩種，還有table和table-cell布局實(shí)現(xiàn)垂直居中后煌妈，會(huì)導(dǎo)致子元素繼承父元素的高度儡羔，不明白為啥，先不寫了璧诵；
老鐵們有好的方法可以留言汰蜘。
