CSS绝对定位下的水平居中原理:
1,先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%
2,再设置div左侧边距margin-left为这个div自身宽度的一半
如:
.box3 {
150px;
height: 26px;
position: absolute;
/* 以下2个left和margin-left可以实现绝对定位时的水平居中 */
left: 50%;
margin-left: -75px;
}
|
CSS绝对定位下的垂直居中原理:
1,先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%
2,再设置div顶部边距margin-top为这个div自身高度的一半
如:
.box3 {
150px;
height: 26px;
background: rgb(0, 0, 0, 0.3);
position: absolute;
/* 以下2个left和margin-left可以实现绝对定位时的水平居中 */
top: 50%;
margin-top: -13px;
bottom: 10px;
border-radius: 13px;
}
|