HTML元素的居中显示设置

最新推荐文章于 2025-09-20 13:23:29 发布

转载最新推荐文章于 2025-09-20 13:23:29 发布 · 673 阅读

收录于

web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了六种使用CSS实现水平居中的方法，包括利用margin和width、inline-block结合text-align、float与定位、绝对定位、CSS3的flex及fit-content等技术。每种方法都附带了优缺点说明。

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%
}