一、已知盒子宽高
绝对定位 + 偏移值 + margin
让明确宽高的盒子水平垂直居中于窗口:
①position: absolute; 元素会变成块元素,脱离普通文档流
②top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子。因此这个元素会填满它相对父元素(body标签、设置了position: relative; 样式的容器)的内部空间。
③设置了宽高:浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算并包裹一层新的盒子。
即块元素是绝对定位,又脱离了普通文档流,浏览器在包裹盒子之前会给margin-top和margi-bottom设置一个相等的值——使用“完全居中”。
div {
width:宽度px;//根据盒子具体宽度填写
height:高度px;//根据盒子具体高度填写
position:abosulte;
right:0;
left:0;
top:0;
bottom:0;
margin:auto;
}
子绝父相 + margin
111
二、未知盒子宽高
子绝父相 + transform
111
flex
1111