子块不知道宽高居中

来源:15-4 面试常考题之宽高不定实现盒子水平垂直居中

自驱动

2020-10-24 23:43

 .subDiv{
     transform: translate(-50%, -50%); /* 先上左移动50%,这里50%是子块自身标准 */
     position:absolute;
     top:50%;        /* 在通过绝对定位下右50%居中,这里50%是父块标准 */
     left:50%;
 }
/*  可以这样理解吗?*/


写回答 关注

1回答

  • qq_慕标6511493
    2020-10-25 00:27:59

    是的。

    transform: translate(-50%-50%),这里表达的是已经绝对定位(相对于父块是相对定位)的子块左上角的点为父块的正中心值减去自身宽高的一半。

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225809 学习 · 18234 问题

查看课程

相似问题