1.使用绝对定位元素自身属性进行居中设置
position: absolute;
bottom: 16px;//放置在底部
//设置居中的关键属性
right: 0;
left: 0;
margin: 0 auto;
该方法主要使用left:0和right:0对dom元素进行拉扯,因此会导致属性值为auto的边距被拉伸,使该元素的宽度撑满整个父级
该方法也适用于垂直居中
1.使用绝对定位元素 父级flex布局 进行设置
绝对定位的元素在设置right、left、top、bottom之前仍然受到父级的布局影响
如仅设置bottom、top则父级对于水平方向的布局仍然会影响该元素
.parent{
display:flex;
justify-content:center;
.child{
position:absolute;
bottom:10px;
}
}
如仅设置right、left则父级对于垂直方向的布局仍然会影响该元素
.parent{
display:flex;
align-items:center;
.child{
position:absolute;
right:0;
}
}
标签:居中,定位,right,父级,元素,bottom,aboslute,left From: https://www.cnblogs.com/Simoon/p/17633153.html