歡迎關注！
css水平與垂直居中布局要求子元素在父元素中水平方向和垂直方向上都處于居中位置，并且子元素和父元素的寬度和高度都是可變的。
水平垂直居中布局通用html
方案一：使用inline-block和text-align，table-cell和vertical-align實現完全據中國布局。設置.parent{display：table-cell；vertical-align：center；}，将父元素上設置為table-cell元素，在table-cell中設置垂直居中，從而實現垂直方向上的居中。
設置.parent{text-align：center；}和.child{display：inline-block；}，将父元素中的子元素設置為水平居中，再将子元素設置為inline-block元素（寬度為内容寬度，可設置寬高），使得text-align屬性的設置對子元素也起作用，從而實現水平居中對齊。
将以上兩條css合并之後，就可以完整實現水平垂直居中對齊。
評價：兼容性好，代碼量稍大。
方案二：使用absolute和transform實現水平垂直居中對齊設置.parent{position：relative；}，将父元素設置為相對定位元素，作為絕對定位元素的參照物。
設置.child{position:absolute;top:50%;left:50%;transform(-50%,-50%);},将子元素設置為相對于父元素的絕對定位元素，并将其定位到父元素的中間位置，通過設置transform屬性，修正使用left和top定位出現的錯誤，從而實現水平垂直居中對齊。
評價：絕對定位元素脫離文檔流，不會對後續元素造成影響；但是transform屬于css3标準定義的屬性，兼容性存在問題。
方案三：使用flex，justify-content和items-align實現水平垂直居中對齊設置.parent{display:flex；justify-content：center；items-align：center；}，該方案看起來比較簡單，隻需要将父元素設置為flex彈性元素，同時使用彈性元素的justify-content和items-align屬性設置子元素在垂直和水平方向上的對齊，最終實現水平和垂直方向的居中。
評價：該方案隻需要設置父元素，不需要設置子元素的樣式。但是在兼容性上需要補充。
收藏轉發請先關注，謝謝支持！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
