aboslute（绝对定位的元素）居中方法

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;
    }
}