我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
我更新了托尼的答案 这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。
center.js:
// We add a pos parameter so we can specify which position type we want
// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
this.css("position", pos);
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it vertically only
jQuery.fn.centerVer = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
return this;
}
在我的<head>:
<script src="scripts/center.js"></script>
用法示例:
$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")
$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")
$("#example5").center("absolute")
$("#example6").center("fixed")
它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。
希望这是有用的人在那里!享受。
其他回答
我更新了托尼的答案 这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。
center.js:
// We add a pos parameter so we can specify which position type we want
// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
this.css("position", pos);
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it vertically only
jQuery.fn.centerVer = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
return this;
}
在我的<head>:
<script src="scripts/center.js"></script>
用法示例:
$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")
$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")
$("#example5").center("absolute")
$("#example6").center("fixed")
它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。
希望这是有用的人在那里!享受。
这太棒了。我添加了一个回调函数
center: function (options, callback) {
if (options.transition > 0) {
$(this).animate(props, options.transition, callback);
} else {
$(this).css(props);
if (typeof callback == 'function') { // make sure the callback is a function
callback.call(this); // brings the scope to the callback
}
}
我用这个:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
这可以只用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 > < /身体>
CSS解决方案 只有两行
它集中你的内部div水平和垂直。
#outer{
display: flex;
}
#inner{
margin: auto;
}
对于仅水平对齐，更改
margin: 0 auto;
对于垂直方向，改变
margin: auto 0;
