元素水平垂直居中的几种方法

Karli ·

更新时间:2024-11-14

· 727 次阅读

多的不说，咋们直接进入正题

纯用margin是做不到的

在这里插入代码片
    Document
    #box1{ width:300px; height: 300px; border:1px black solid;}
    #box2{ width:100px; height:100px; background:red; margin:auto auto;}

效果图如下：
在这里插入图片描述
**

我们可以用如下的方法实现：

**
1可以做到，但是box2需要固定大小


    Document
    #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:100px; height:100px; background:red; position: absolute;
        left:50%; top:50%; margin:-50px;
    }

这种是先定位（position: absolute; left:50%; top:50%; ）然后再拉取（ margin:-50px;）就可以居中了。

效果图如下：
在这里插入图片描述
**2 margin的百分比是按照box1来计算的, translate的百分比是按照box2来计算的, 这种模式非常适合box2不是固定大小的情况。


    Document
    #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:200px; height:100px; background:red; position: absolute;
        left:50%; top:50%; transform: translate(-50%,-50%);}

这种是先定位（position: absolute; left:50%; top:50%; ）然后再位移（ transform: translate(-50%,-50%）就可以居中了。

效果图如下：
在这里插入图片描述
3用定位


    Document
        #box1{ width:300px; height: 300px; border:1px black solid; position: relative;}
    #box2{ width:200px; height:100px; background:red; margin:auto;
        position: absolute; left:0; right:0; top:0; bottom:0; }

这种是利用margin:auto使元素水平居中后；然后再加上咋们的定位position上下左右都为0即可居中。
效果图如下：
在这里插入图片描述 4flex弹性


    Document
    #box1{ width:300px; height: 300px; border:1px black solid; display: flex;}
    #box2{ width:200px; height:100px; background:red; margin:auto; }

效果图如下：
在这里插入图片描述
相信大家学会了吧！