欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2d转换

程序员文章站 2024-03-16 20:37:28
...

位移 translate

定位

会影响其他盒子位置(脱离标准流);

行内元素定位,直接变为块级元素;

移动

不影响其他元素的位置;

对行内元素无效;对块级元素生效;

子元素居中

.parent {

  width: 500px;

  height: 500px;

  border: 1px solid #000;

  position: relative;

}

.son {

  width: 200px;

  height: 200px;

  background-color: pink;

  position: absolute;

  left: 50%;

  top: 50%;

  /* 沿着X轴 Y轴 负方向 移动 自身宽高的一半*/

  transform: translate(-50%, -50%);

}
相关标签: 2d转换