方案一 flex布局方式

    1. <div class="father">
    2.   <div class="son"></div>
    3. </div>
    1. .father {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: pink;
    5.   display: flex;
    6.   justify-content: center;
    7.   align-items: center;
    8. }
    10. .son {
    11.   width: 50px;
    12.   height: 50px;
    13.   background-color: yellow;
    14. }

    看效果请点击案例
    方案二 用text-align

    1. .father {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: pink;
    5.   text-align: center;
    6.   line-height: 200px;
    7. }
    9. .son {
    10.   display: inline-block;
    11.   width: 50px;
    12.   height: 50px;
    13.   background-color: yellow;
    14. }

    看效果请点击案例 如何让子盒子在父盒子中垂直居中-方法二
    方案三 用子绝对父相对移动子盒子自身的一半

    1. .father {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: pink;
    5.   position: relative;
    6. }
    8. .son {
    9.   width: 50px;
    10.   height: 50px;
    11.   background-color: yellow;
    12.   position: absolute;
    13.   left: 50%;
    14.   top: 50%;
    15.   margin-top: -25px;
    16.   margin-left: -25px;
    17. }

    看效果请点击案例 如何让子盒子在父盒子中垂直居中-方法三
    方案四 子绝父相和外边距margin实现

    1. .father {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: pink;
    5.   position: relative;
    6. }
    8. .son {
    9.   width: 50px;
    10.   height: 50px;
    11.   background-color: yellow;
    12.   position: absolute;
    13.   left: 0;
    14.   top: 0;
    15.   right: 0;
    16.   bottom: 0;
    17.   margin: auto;
    18. }

    看效果请点击案例 如何让子盒子在父盒子中垂直居中-方法四
    方案五子绝父相子位移实现

    1. .father {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: pink;
    5.   position: relative;
    6. }
    8. .son {
    9.   width: 50px;
    10.   height: 50px;
    11.   background-color: yellow;
    12.   position: absolute;
    13.   left: 50%;
    14.   top: 50%;
    15.   transform: translate(-50%, -50%);
    16. }

    看效果请点击案例 如何让子盒子在父盒子中垂直居中-方法五