应用肯定精准定位+负外边距让DIV层水平竖直垂直

2021-01-20 10:30 jianzhan
让1个层水平竖直垂直居中是1个十分普遍的合理布局方法,但在html中水平垂直居中应用margin:0px auto;能够完成,但竖直垂直居中应用外边距是没法做到实际效果的。(网页页面设定height:100%;是失效的),这里应用肯定精准定位+负外边距的方法来完成竖直垂直居中,但另外要考虑到网页页面重设尺寸的状况,必须应用js来调整。
1、让层水平垂直居中

拷贝编码
编码以下:

.className{
width:270px;
height:150px;
margin:0 auto;
}

应用margin:0 auto;让层水平垂直居中,注意宽度和高宽比必不能少。
2、让层竖直垂直居中

拷贝编码
编码以下:

.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:⑺5px 0 0 ⑴35px;
}

将层设定为肯定精准定位,left和top为50%,这时候候应用负外边距,负外边距的尺寸为宽高的1半。
3、在重设窗体的情况下层依然维持垂直居中

拷贝编码
编码以下:

$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width()
- $('.className').outerWidth())/2,
top: ($(window).height()
- $('.className').outerHeight())/2
});
});
$(window).resize();
});

这里用到的jquery的方式。
resize()恶性事件:当在窗体重设尺寸时开启。
outerWidth():获得第1个配对元素外界宽度(默认设置包含补白和边框)。