html5 - CSS 用 position: absolute 与 transform 来居中块级元素的问题

问题描述

问 题

为什么

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

能起到居中的效果
这里不应该相互抵消掉了相当于没有布局么

解决方案

画一个图应该就很清晰明了了

第一步

第二步

所以本质上理解

1.绝对定位元素的定位基准点是其有定位元素的祖先元素

1. 而translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度

图画的不太好，哈哈哈

这篇关于html5 - CSS 用 position: absolute 与 transform 来居中块级元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！