子元素在父元素中垂直水平居中方法

position有三种：

​
1.父元素:position:absolute/relative/fixed;
子元素:{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
2.父元素:position:absolute/relative/fixed;
子元素:{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
3.2.父元素:position:absolute/relative/fixed;
子元素:{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50px,-50px);
}

​

 display:flex;有两种

1.父元素:{
    display:flex;
    justify-content:center;
    align-items:center;
}
2.父元素:{
    display:flex;
    justify-content:center;
}
子元素:{
    align-self:center;
}

还有一种，添加弟弟元素

1.添加一个弟弟元素
2.当前元素与弟弟元素添加display:inline-block;
3.弟弟元素高度设为与父元素同高
4.当前元素与弟弟元素添加vertical-align:middle;
5.父元素添加text-align:center;