HTML元素的居中显示设置

1. margin和width实现水平居中

.className{
    width:xxxpx;
    margin:0 auto;
}

优点：简单，浏览器兼容性好
缺点：width固定，难以自适应

2.inline-block实现水平居中(结合父元素的text-align)

1.父元素设置text-align:center;
2.子元素设置display:inline-block;

3.float和定位相结合

.parent{
    float:left;
    width=100%;
}
.child{
    clear:left;
    float:left;
    position:relative;
    left:50%//整个分页向右边移动宽度的50%
    text-align:center;
}
.groundchild{
    display:block;
    float:left;
    position:relative;
    right:50%
}

优点：兼容性强、扩展性强
缺点：原理复杂

4.绝对定位实现水平居中

5.CSS3的flex实现水平居中

6.CSS3的fit-content实现水平居中

内容转自：http://www.w3cplus.com/css/elements-horizontally-center-with-css.html