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实现水平居中

欢迎分享本文，转载请保留出处：前端ABC » HTML元素的居中显示设置