//父盒子有宽高:
        .parent {
                width: 150px;
                height: 150px;
                background-color: teal;
                position: relative; /*注意父盒子要相对定位*/
                }
                .child {
                width: 50px;
                height: 50px;
                background-color: violet;
                float: left;
                position: absolute;
                top: 50%; /*容器的一半*/
                left: 50%;
                margin-top: -25px; /*子盒子高度的一半*/
                margin-left: -25px; /*子盒子宽度的一半*/
                }
 
 //父盒子没有宽高:
            /子盒子
            #div1{
            width: 200px;
            height: 200px;
            margin:auto;
            position: absolute; //父元素需要相对定位
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: red;
            }
 
 
//css3 中的新属性 transform 实现盒子居中
            .parent{
            /*父盒子*/
            width: 500px;
            height: 500px;
            background: green;
            position: relative;
            }
            #child{
            /*我是子盒子我要居中*/
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            }