我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
这是我的版本。看完这些例子后,我可能会改变它。
$.fn.pixels = function(property){
return parseInt(this.css(property));
};
$.fn.center = function(){
var w = $($w);
return this.each(function(){
$(this).css("position","absolute");
$(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
$(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
});
};
其他回答
我喜欢添加函数到jQuery,所以这个函数会有帮助:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
现在我们可以写成:
$(element).center();
演示:小提琴(添加参数)
你可以使用CSS translate属性:
position: absolute;
transform: translate(-50%, -50%);
阅读这篇文章了解更多细节。
这是未经测试的,但类似的东西应该工作。
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
这是我的版本。看完这些例子后,我可能会改变它。
$.fn.pixels = function(property){
return parseInt(this.css(property));
};
$.fn.center = function(){
var w = $($w);
return this.each(function(){
$(this).css("position","absolute");
$(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
$(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
});
};
我想纠正一个问题。
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
以上代码在这种情况下将不起作用。height(假设用户调整屏幕大小,内容是动态的)和scrollTop() = 0,示例:
窗口。高度是600 这一点。高度是650
600 - 650 = -50
-50 / 2 = -25
现在方框在屏幕外的中心位置为-25。