歡迎關注！
css垂直居中布局要求子元素在父元素垂直居中，并且子元素與父元素高度均為可變的。
垂直居中布局解決方案通用html
方案一：使用table-cell和vertical-align實現垂直居中布局通過設置.parent{display：table-cell；verticzl-align:middle}，table-cell将父元素顯示方式設置為了表格單元格顯示，在父元素上設置垂直居中屬性為middle，從而使得父元素中的子元素在顯示時都表現為垂直居中。
評價：該方案可以兼容到IE8，并且隻需要設置父元素就可以實現居中。
方案二：使用absolute和transform實現垂直居中布局通過設置.parent{position：relative；}，将父元素設置為相對定位元素，作為絕對定位元素的參照物。
設置.child{position：absolute；top：50%；translateY（-50%）；}，将子元素設置為絕對定位元素，并将其定位到距離父元素頂部50%的位置，在子元素沿Y軸方向向上移動自身高度的50%，從而實現居中，由于距離都是使用百分比實現的，所有元素寬度都是可變的。
評價：子元素作為絕對定位元素脫離了文檔流，不會影響到後續元素的布局。同時，如果父元素隻有唯一的子元素，那麼在子元素脫離文檔流之後，父元素就會失去高度，所以上面的例子并不是完善的。
方案三：通過flex和align-items實現垂直居中設置.parent{display:flex；align-items:center；}，将父元素設置為flex彈性元素，再設置align-items屬性将flex彈性元素中的子元素設置為居中對齊（垂直）。從而實現垂直居中布局。
評價：flex彈性元素屬于css3中新引入的，兼容性還不是很好。
收藏轉發請先關注，謝謝支持！
,
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
