浏览器中盒子的位置
1.使用绝对元素,相对于浏览器第一窗口进行50%的距离设置,盒子会移动到第四象限;
再使用外边距设置让盒子移动到中间位置(注意正负值的设置)
*{margin: 0; padding: 0; } div{ width:200px; height:200px; background: yellowgreen; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; }
父盒子中子盒子的位置
方法同上,但是位置变化是相对于父盒子
*{margin: 0; padding: 0; } .box{ width:500px; height:500px; background: yellowgreen; position:relative } .child{ width:200px; height:200px; background: red; position:absolute; }
标签:居中,定位,50%,盒子,元素,height,background,margin,200px From: https://www.cnblogs.com/Eliauk-1210/p/17762566.html