有 div1 relative 布局
div1 下有 div2 absolute
现在div2 需要相对于父容器设置对齐位置
// 左上
.pos0{
top: 5%!important;
left: 5%!important;
}
// 左下
.pos1{
bottom: 5%!important;
left: 5%!important;
}
// 右上
.pos2{
top: 5%!important;
right: 5%!important;
}
// 右下
.pos3{
bottom: 5%!important;
right: 5%!important;
}
// 左中
.pos4{
top: 50%;
left:5%;
transform: translate(0%,-50%);/*50%为自身尺寸的一半*/
}
// 右中
.pos5{
top: 50%;
right:5%;
transform: translate(0%,-50%);/*50%为自身尺寸的一半*/
}
// 居中
.pos6{
top: 50%;
left:50%;
transform: translate(-50%,-50%);/*50%为自身尺寸的一半*/
}
// 顶中
.pos7{
top: 5%;
left:50%;
transform: translate(-50%,0%);/*50%为自身尺寸的一半*/
}
// 底中
.pos8{
bottom: 5%;
left:50%;
transform: translate(-50%,0%);/*50%为自身尺寸的一半*/
}
居中实现需要用到 transform 属性