绝对定位垂直居中
css吧
全部回复
仅看楼主
level 11
狼黎殇83c 楼主
绝对对位原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。
.absolute_center{
/*display:none;*/
position:absolute;
width:200px;
height:200px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:#518fca;
resize:both;/*用于设置了所有除overflow为visible的元素*/
overflow:auto;
}
2023年01月29日 01点01分 1
level 11
狼黎殇83c 楼主
使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现。
2023年01月29日 01点01分 2
level 11
狼黎殇83c 楼主
优点:支持响应式,只有这种方法在resize之后仍然垂直居中
缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条
2023年01月29日 01点01分 3
1