2021-06-18 在子元素在父元素位置居中

方法1：使用postion定位

.parent{
    width: 100px;
    height: 100px;
    background-color:pink;
    position: relative;
}
.child{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left:50%;
    margin-top: -10px;
    margin-left: -10px;
    background-color: #fff;
   
}

方法二：使用flex

.third{
    display: flex;
    width: 100px;
    height: 100px;
    background-color: khaki;
    justify-content: center; //主轴子元素排列方式
    align-items: center;//侧轴子元素的排列方式
}
.fourth{
    width: 20px;
    height: 20px;
    background-color: #fff;
}

方法三：

.first{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
}
.second{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
}