我如何去设置一个<div>在屏幕的中心使用jQuery?


当前回答

为什么你不使用CSS居中div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 

其他回答

你可以使用CSS translate属性:

position: absolute;
transform: translate(-50%, -50%);

阅读这篇文章了解更多细节。

我会推荐jQueryUI位置实用工具

$('your-selector').position({
    of: $(window)
});

这给了你更多的可能性,而不仅仅是定心…

我用这个:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

CSS解决方案 只有两行

它集中你的内部div水平和垂直。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

对于仅水平对齐,更改

margin: 0 auto;

对于垂直方向,改变

margin: auto 0;

这可以只用CSS来完成。但他们是用jQuery或JavaScript问的

在这里,使用CSS Flex box属性来对齐div中心。

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

对齐项目:中心;-用于垂直对齐。

justify-content:中心;-用于水平对齐。

document.querySelector .classList.add(“身体”)(“中心”); 身体{ Margin: 0; 身高:100 vh; 宽度:100%; 背景:# ccc; } #{主要 背景:# 00 cc00; 宽度:100 px; 身高:100 px; } body.center { 显示:flex; 对齐项目:中心; justify-content:中心; } <身体> < div id = "主" > < / div > < /身体>