汇总各种垂直居中

Posted 2020-10-13

汇总各种垂直居中

一.子元素定宽高　　

1.给父元素相对定位position:relative，

子元素设置绝对定位position:absolute;top:0;left:0;right:0;bottom:0;
子元素position:absolute;left:calc(50% - 子元素宽度/2);top:calc(50% - 子元素高度/2);
子元素position:absolute;left:50%;top:50%;translateX(-子元素宽度/2);translateY(-子元素高度/2);

2.子元素不定宽高
弹性盒模型   父元素display:flex;align-item:center;justify-content:center;
给父元素相对定位position:relative，子元素 position:absolute;transform:translate(-50%,-50%);

3.父元素宽高不确定，或者为当前浏览器高度时（用js设置，曾经做项目遇到过这个小坑）

假设.login是子元素的类名

$(‘.login‘).css({
position:"absolute",
left:($(window).width()-$(‘.login‘).outerWidth())/2,
top:($(window).height()-$(‘.login‘).outerHeight())/2
})