我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
这个功能的转换组件在Chrome中工作得非常糟糕(没有在其他地方测试)。我会调整窗口的大小,我的元素会慢慢移动,试图赶上。
因此下面的函数注释了这一部分。此外,我还添加了参数,用于传入可选的x和y布尔值,如果你想垂直居中,而不是水平居中,例如:
// Center an element on the screen
(function($){
$.fn.extend({
center: function (x,y) {
// var options = $.extend({transition:300, minX:0, minY:0}, options);
return this.each(function() {
if (x == undefined) {
x = true;
}
if (y == undefined) {
y = true;
}
var $this = $(this);
var $window = $(window);
$this.css({
position: "absolute",
});
if (x) {
var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
$this.css('left',left)
}
if (!y == false) {
var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();
$this.css('top',top);
}
// $(this).animate({
// top: (top > options.minY ? top : options.minY)+'px',
// left: (left > options.minX ? left : options.minX)+'px'
// }, options.transition);
return $(this);
});
}
});
})(jQuery);
其他回答
为了使元素相对于浏览器视窗居中,不要使用position: absolute,正确的位置值应该是固定的(absolute的意思是:“元素的位置相对于它的第一个定位(不是静态的)祖先元素”)。
这个中心插件的替代版本使用“%”而不是“px”,所以当你调整窗口大小时,内容保持居中:
$.fn.center = function () {
var heightRatio = ($(window).height() != 0)
? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0)
? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
你需要把margin: 0从宽度/高度中排除内容边距(因为我们使用的是位置固定,有边距没有意义)。 根据jQuery文档使用. outerwidth (true)应该包括边缘,但当我在Chrome中尝试时,它没有像预期的那样工作。
50*(1比)来自:
窗口宽度:W = 100%
元素宽度(%):w = 100 * elementWidthInPixels/windowWidthInPixels
它们计算左边居中:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
我不认为有一个绝对位置将是最好的,如果你想要一个元素总是居中在页面的中间。你可能需要一个固定的元素。我发现另一个jquery定心插件使用固定定位。这叫做固定中心。
我会推荐jQueryUI位置实用工具
$('your-selector').position({
of: $(window)
});
这给了你更多的可能性,而不仅仅是定心…
我用这个把UL放在中间位置。
cadasWidth = $('.card-dashboard').innerWidth();
cadasWidthCenter = cadasWidth/2;
ulmenuWidth = $('.card-dashboard ul#menu').outerWidth();
ulmenuWidthCenter = ulmenuWidth/2;
ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;
$('.card-dashboard ul#menu').css({
'left' : ulmenuStart,
'position' : 'relative'
});
CSS解决方案 只有两行
它集中你的内部div水平和垂直。
#outer{
display: flex;
}
#inner{
margin: auto;
}
对于仅水平对齐,更改
margin: 0 auto;
对于垂直方向,改变
margin: auto 0;