居中（水平垂直）

<div id="box">
    <div id="rect"></div>
</div>

<style>
    
    #box
    {
        position: relative;

        width: 200px;
        height: 200px;
        background-color: #666;
    }
    
    #rect
    {
        position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0; 

        width: 100px;
        height: 100px;
        background-color: red;
        
        /*垂直和水平居中*/
        margin: auto;  
    
        /*垂直居中*/
        margin: auto 0;
    
        /*水平居中*/
        margin: 0 auto;
    }
    
</style>