使用jQuery的可变宽度的中心对象
需要将宽度根据浏览器窗口更改的对象居中。 通常我会使用css，其顶部和左侧位置设置为50％，负边距等于宽度和高度的一半，但显然不能满足此需求。
我以为我的jQueryfunction会起作用……但没有bueno。 我错过了CSS中的东西吗？
谢谢！
http://jsfiddle.net/danielredwood/EbkLg/2/
这是CSS
#t { width:25%; height:25%; background:red; } JavaScript的
$(window).resize(function(){ resizenow(); }); function resizenow() { var browserwidth = $(window).width(); var browserheight = $(window).height(); $('#t').css('left', (browserwidth - $(this).width())/2).css('top', (browserheight - $(this).height())/2); });
在你链接到你的JSFiddle中使用$(this).width() ：
$('#t').css('left', ((browserwidth - $(this).width())/2)) .css('top', ((browserheight - $(this).height())/2));
但是当调用函数resizenow（）时， this == window 。 如果用$("#t")替换$(this)它可以正常工作，正如这个JSFiddle所示： http ： //jsfiddle.net/jackfranklin/F2tR3/1/
在jQuery的css()函数中， this的值未设置为您正在更改其样式的元素，因此原始代码无效的原因。
像这样的东西？
$(document).ready(function(){ var browserwidth = $(window).width(); var browserheight = $(window).height(); var x=browserwidth/4; $('#t').css({'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); $(window).resize(function(){ var browserwidth = $(window).width(); var x=browserwidth/4; var browserheight = $(window).height(); $('#t').css({'width' : x, 'height' : x, 'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); }); #t { width: 500px; height: 500px; position: relative; background:red; } });
或者如果你不想让它成为正方形，只是不要在jquery中设置宽度和高度，在css中使用百分比。
这是为您尝试设置的左侧和顶部值解析值的方式。 如果你像这样打破它们，它的工作原理：
var widthDelta = $(window).width() - $('#t').width(); var heightDelta = $(window).height() - $('#t').height(); $('#t').css('left', widthDelta / 2).css('top', heightDelta / 2);
我还没有准确分析出现了什么问题 – 我只是寻找一些先行的东西 – 我将不得不仔细研究它，看看具体问题是什么。
jQuery width()和height()根据jQuery文档返回无单位像素值。
但是当你把它重新插入到jQuery的css()的计算中时，你需要添加单位标签“px”。
编辑：
如果您的计算基于百分比，那么一切都是错误的，因为width()和height()是像素值。 无论哪种方式，你仍然需要在jQuery的css()添加单位，’px’或’％’。
EDIT2：
css()显然默认使用像素，但如果OP使用百分比，则需要'%' 。
这将使红色div水平居中，并且它的宽度和高度将根据浏览器窗口大小进行动态改变;
现在垂直居中是一个更复杂的故事……
尝试添加位置：固定到您的CSS。 这意味着您为元素指定的任何定位都将与实际窗口而不是文档有关。
不确定这是否会解决它，但它应该。