在前端开发中，经常会遇到子元素需要在父元素居中的情况，而对应的css方法也是多种多样的。子元素在父元素的居中问题也是在面试中经常被问到的问题，本文总结了在日常开发中最经常用到的几种方法，供大家参考。

1、未知元素大小

• 1.1 子绝父相布局，top、right、bottom、left都设为0，margin属性设为auto

#father{
    position:relative;
    width:400px;
    height:400px;
    background-color:blue;
}
#child{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    width:200px;
    height:200px;
    background-color:red;
}

• 1.2 子绝父相布局

#father{
    position:relative;
    width:400px;
    height:400px;
    background-color:blue;
}
#child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:200px;
    background-color:red;
}

• 1.3 使用flex布局

#father{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:400px;
    height:400px;
    background-color:blue;
}
#child{
    width:200px;
    height:200px;
    background-color:red;
}

2、已知元素大小

• 2.1 子绝父相布局，top和left设置50%，margin-left设置子元素一半宽度的相反数，margin-top设置子元素高度一半的相反数

#father{
    position:relative;
    width:400px;
    height:400px;
    background-color:blue;
}
#child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
    width:200px;
    height:200px;
    background-color:red;
}

• 2.2 直接计算出来,margin-top设置为(父元素高度-子元素高度)/2，margin-left设置为(父元素宽度-子元素宽度)/2

#father{
    position:relative;
    width:400px;
    height:400px;
    background-color:blue;
}
#child{
    position:absolute;
    margin-top:100px;
    margin-left:100px;
    width:200px;
    height:200px;
    background-color:red;
}