宽高固定的盒子上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- 第一步:设置待定位盒子和宽高值 第二步:将待定位盒子position设为absolute,使其顶部和左侧定位距离设为父元素高和宽的50%(即:先将盒子定位到“父元素4分之1区域的右下部”) 第三步:把待定位盒子的margin-top值和margin-left值设为其高度和宽度一半的负值(即:把盒子从右下区域拉回正中间) --> <div id="div2"> </div> <style> * { margin:0; padding:0; } #body { background-color:green; } #div2 { width:300px; height:200px; background-color:red; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-150px; } </style> </body> </html>