使用HTML+CSS 布局

利用定位居中

方法一：定位 + 负外边距

优点：计算定位的时候只需要知道子元素的宽高，兼容性好

        .parent{

            position: relative;

            ...

        }

        .child{

            position: absolute;

            left:50%;

            top: 50%;

            margin-left: -100px; /* 往左移动自身宽度的一半 */

            margin-top: -100px;  /* 往上移动自身高度的一半 */

            width: 200px;

            height: 200px;

            ...

        }

方法二：定位(left:0;right:0;top:0;bottom:0;) + margin:auto auto;

优点：计算位置不需要知道父元素和子元素的尺寸，缺点：不兼容ie8以下的浏览器

        .outer{

            position: relative;

            ...

        }

        .inner{

            position: absolute;

            left: 0;

            right: 0;

            top: 0;