微信小程序-margin(-top 0 0 -left) PK transform: translate(-50%, -50%) 实现弹框相对屏幕水平垂直居中

刺骨的言语ヽ痛彻心扉 2023-07-17 04:44 3阅读 0赞

上一篇：[https://blog.csdn.net/weixin\_43970743/article/details/104917333][https_blog.csdn.net_weixin_43970743_article_details_104917333]

相信很多小伙伴是被我上篇blog给“骗”过来的，那就暂留片刻，相信不会让你“掉价”。哈哈哈哈

### 注意： ###

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置；而`transform: translate(-50%, -50%)`：作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

对比与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

## **知识点：** ##

*  `CSS3： transform: translate(-50%, -50%);`

.father{
    position: absolute;
    
    }
    
    .son { 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

对比：

结果很明了，都是实现了相同的水平垂直居中，可看，两种方式，虽大同却小异；看各自的理解，恰当使用；

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[https_blog.csdn.net_weixin_43970743_article_details_104917333]: https://blog.csdn.net/weixin_43970743/article/details/104917333