解析：

   1、margin:xpx auto;

   2、确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。

     实现居中关键在于 margin设置与 position:relative.

    .div {

     width:500px ;

     height:300px;

     margin: -150px 0 0 -250px;

     position:relative;

     left:50%;

     top:50%;

}

3、position:absolute;

        top: 50%;

        left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100