css - 请问这个div上下居中实现原理

问题描述

问 题

下面是从极验那边看到的垂直居中写法:

#popup-captcha {
    position: fixed;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 9999;
}

想问一下为什么单独top,left或者transform: translate()不能保证页面居中, 只有两个合在一起才能保证完全居中??

解决方案

因为这个标签本身是有宽高的，left50%，top50%只能保证标签border-top和border-left这两条线是
居中的，并不代表整个标签区域集中，所以要用到translate来抵消标签本身宽高带来的影响，-50%就是
把标签向上和向左平移自身宽高的50%，这样就居中了

这篇关于css - 请问这个div上下居中实现原理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！