水平垂直居中方法

<div id="father">
        <div id="son">
        </div>
    </div>

flex布局

father {

       width: 100px;
       height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: hotpink;
   }
   #son { 
       width: 20px;
       height: 20px;
       background-color: ivory;
   }

绝对定位

//1.transform #father {

        width: 100px;
        height: 100px;
        position: relative;
        background-color: hotpink;
    }
    #son { 
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: ivory;
    }

//2.margin负值 #father {

        width: 100px;
        height: 100px;
        position: relative;
        background-color: hotpink;
    }
    #son { 
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -10px;
        margin-top: -10px;
        background-color: ivory;
    }

//3.top left right bottom都为0 margin:auto #father {

        width: 100px;
        height: 100px;
        position: relative;
        background-color: hotpink;
    }
    #son { 
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: ivory;
    }

table-cell

我居中了哦

father {

        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background-color: khaki;
    }

4.calc动态计算

#father { 
            position: relative;
            width: 400px;
            height: 160px;
            background-color: lawngreen;
        }
        #son { 
            position: absolute;
            width: 200px;
            height: 50px;
            background-color: khaki;
            left: -webkit-calc((400px - 200px)/2);
            top: -webkit-calc((160px - 50px)/2);
            left: -moz-calc((400px - 200px)/2);
            top: -moz-calc((160px - 50px)/2);
            left: calc((400px - 200px)/2);