## margin和width實現水平居中 給需要居中的元素設置寬度，然后設置margin:0 auto; 優點：簡單，方便，瀏覽器兼容性強 缺點，需要知道當前元素的寬度。擴展性差 ``` .son{ width:300px; margin:0 auto; } ``` ## inline-block 實現水平居中的方法 給子元素設display:inline-block; 將元素設置為行內快元素，然后給夫元素設置 text-align:center; 行內元素居中 優點：簡單，拓展性強 缺點：需要處理inline-block的瀏覽器兼容性 ``` .son{ position:absolute; /*絕對定位*/ width:300px; left:50%; margin-left:-150px; } ``` ## css3的flex實現水平居中 為父元素設置 display:flex;justify-content:center; 優點：方便，快捷 缺點：兼容性差 ``` .fater{ dispay:flex; justify-content:center; //設置內容對齊方式為居中 } .son{ } ``` ## css3的fit-content實現水平居中 優點：簡單，方便 缺點：兼容性差 ``` .fa5{ width: fit-content; margin:0 auto; } ```