web前端開發中css水平居中布局解決方案大全！

水平居中布局解決方案：水平居中布局需要實現子元素在父元素中水平居中並且子元素和父元素的寬度均為可變的。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六學完有工作推薦

方案一：使用inline-block和text-align屬性實現水平居中布局

在css樣式單中設置.child將子元素的寬度設置為內容寬度。

設置.parent將父元素中的子元素設置為居中。

評價：該解決方案的兼容性非常好，甚至可以兼容到IE6，缺點在於在頁面中元素較多時，代碼數量將稍顯龐大。

方案二：使用table和margin屬性實現水平居中布局

在css樣式單中設置.child，其中table將子元素設置寬度為內容寬度，margin屬性中的上下為0，左右為auto，從而實現居中。

評價：該解決方案只修改到子元素的樣式，與父元素無關；缺點是只能兼容IE8以上版本的瀏覽器。

方案三：使用absolute和transform實現水平居中布局

在css樣式單中設置.parent，將父元素設置為相對定位元素，作為子元素的參考元素。

設置.child，使用絕對定位元素將子元素放到父元素中間，再使用translateX（-50%）將子元素自身寬度的50%移到正確的位置上。

評價：子元素脫離文檔流，不會影響到後續元素的布局；但是transform是css3中新規定的屬性，兼容性上有欠缺。

方案四：使用flex和justify-content實現水平居中布局

在css樣式單中設置.parent，將父元素設置為flex元素，justify-content使得彈性元素flex中的子元素自動居中對齊。

評價：該方案只涉及到父元素的屬性設置，不牽扯到子元素。缺點是flex的兼容性還比較弱。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！