## 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; } ```