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屬性設置子元素在垂直和水平方向上的對齊，最終實現水平和垂直方向的居中。

評價：該方案只需要設置父元素，不需要設置子元素的樣式。但是在兼容性上需要補充。