盒子水平垂直居中的六种方式

最新推荐文章于 2025-04-08 11:08:01 发布

原创最新推荐文章于 2025-04-08 11:08:01 发布 · 435 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html5 #html

本文详细介绍了使用CSS将元素水平垂直居中的六种方法，包括：1) 绝对定位加margin auto；2) 绝对定位配合负margin；3) 使用calc()计算方法；4) 绝对定位结合transform位移；5) 弹性盒子布局；6) Grid布局。每种方法都有对应的代码示例和应用场景，帮助开发者灵活应对不同场景下的居中需求。

盒子水平垂直居中的六种方式

1. 绝对定位加margin：auto

position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

demo1:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

2. 绝对定位配合负margin

position: absolute;
top:50%;
left:50%;
margin:-高/2 -宽/2;

demo2:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top:50%;
    left:50%;
    margin: -50px -100px;
}

3. 绝对定位配合calc()计算方法

position: absolute;
top:calc(50%-高/2);
left:calc(50%-宽/2);

demo3:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top: calc(50% - 50px);
    left:calc(50% - 100px);
}

4. 绝对定位配合位移

position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)

demo4:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    position: relative;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%)
}

5. 弹性盒子(flex布局)

display: flex;
justify-content: center;
align-items: center;

demo5:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;
    
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;
}

6. grid布局

display: grid;
align-self: center;
justify-self: center;

demo6:

.box{
    width: 100vw;
    height: 100vh;
    background-color: antiquewhite;

    display: grid;
}
.child{
    width: 200px;
    height: 100px;
    background-color: gold;

    justify-self: center;/*水平居中*/
    align-self: center;/*垂直居中*/
}