设置两个盒子，关系是父与子：
<body> <div id="wrap"> <div id="inner"> inner </div> </div> </body>方法一：
将父元素的width和height设置的和子元素的大小一样，然后设置父元素wrap的padding。此时padding会将子元素挤进父元素的中间位置；此时父、子元素的定位是否开启都可以； *{ margin: 0; padding: 0; } #wrap{ width: 100px; height: 100px; /*将padding设置，来挤出来居中的样子；但是要注意的是，此时的width和height要和子元素的大小一样，否则还是不居中*/ padding: 100px; border: 1px solid; margin: 100px auto; } #inner{ width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }方法二：
父元素相对定位，子元素绝对定位；绝对定位盒子模型有个特点：left+right+width+padding+margin=包含块的宽度；所以此时可以将left、right（默认值为auto，所以需要重设置）设置为0，而padding已经确定（未设置时默认值为0px），所以剩下的都是margin，但是margin的默认值是0px。所以就将magin设为auto，使得元素自动居中了；即：left、right、top、bottom为0；margin为auto; *{margin: 0;padding: 0;} #wrap{ position: relative; width: 200px; height: 200px; /*padding: 100px;*/ border: 1px solid; margin: 100px auto; } #inner{ position: absolute; /*left+right+width+padding+margin=包含块的宽度*/ /*0 0 100 0 auto =300*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }方法三：
父元素相对定位，子元素绝对定位；将子元素left和right直接设为50%，相对的是父元素；然后在使用margin-left和margin-top设为子元素的一半的负数。就是将偏离父元素中心的那段拽回来； #inner{ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }（待扩充）
