Ton*_* L. 1062
我喜欢向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();
演示:小提琴(附加参数)
mol*_*oco 141
我在这里放了一个jquery插件
非常短的版本
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
精简版
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
})(jQuery);
由此代码激活:
$('#mainDiv').center();
插件版本
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // Default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minX:0, // pixel, minimum left element value
minY:0, // pixel, minimum top element value
withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top+'px'});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left+'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);
由此代码激活:
$(document).ready(function(){
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
);
是对的吗 ？
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
cet*_*nar 60
$('your-selector').position({
of: $(window)
});
这给你提供了更多的可能性而不仅仅是居中...
Juh*_*nen 39
这是我的目标.我最终将它用于我的Lightbox克隆.此解决方案的主要优点是即使窗口调整大小,元素也会自动保持居中,这使其成为这种用法的理想选择.
$.fn.center = function() {
this.css({
'position': 'fixed',
'left': '50%',
'top': '50%'
});
this.css({
'margin-left': -this.outerWidth() / 2 + 'px',
'margin-top': -this.outerHeight() / 2 + 'px'
});
return this;
}
apa*_*aul 25
您可以单独使用CSS来像这样居中:
.center{
position: absolute;
height: 50px;
width: 50px;
background:red;
top:calc(50% - 50px/2); /* height divided by 2*/
left:calc(50% - 50px/2); /* width divided by 2*/
}<div class="center"></div>calc() 允许你在css中进行基本计算.
Vol*_*ike 14
我正在扩展@TonyL给出的伟大答案.我正在添加Math.abs()来包装值,并且我还考虑到jQuery可能处于"无冲突"模式,例如在WordPress中.
我建议您使用Math.abs()包装顶部和左侧值,如下所示.如果窗口太小,并且您的模态对话框顶部有一个关闭框,这将防止看不到关闭框的问题.托尼的功能可能具有负面价值.关于如何结束负值的一个很好的例子是,如果你有一个大的居中对话框,但最终用户已经安装了几个工具栏和/或增加了他的默认字体 - 在这种情况下,模态对话框上的关闭框(如果在顶部)可能不可见和可点击.
我做的另一件事是通过缓存$(window)对象来加快速度,以便减少额外的DOM遍历,并使用集群CSS.
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
'position':'absolute',
'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
要使用,您可以执行以下操作:
jQuery(document).ready(function($){
$('#myelem').center();
});
小智 11
我会使用jQuery UI position函数.
<div id="test" style="position:absolute;background-color:blue;color:white">
test div to center in window
</div>
如果我有一个id为"test"的div来居中,那么下面的脚本会将div放在文档就绪的窗口中.(位置选项中"my"和"at"的默认值为"center")
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
小智 8
我想纠正一个问题.
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
如果this.height(假设用户调整屏幕大小并且内容是动态的)scrollTop() = 0,上面的代码将不起作用,例如:
window.height是600
this.height的650
600 - 650 = -50
-50 / 2 = -25
现在盒子在-25屏幕中央.
这是未经测试的,但这样的事情应该有效.
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
如果这个问题教会了我什么的话，那就是：不要改变已经有效的东西:)
\n\n我在http://www.jakpsatweb.cz/css/css-vertical-center-solution.html上提供了（几乎）逐字处理此问题的副本- 它对 IE 造成了严重的黑客攻击，但提供了回答问题的纯 CSS 方式：
\n\n.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}\n.helper {#position:absolute; #top:50%;\n display:table-cell; vertical-align:middle;}\n.content {#position:relative; #top:-50%;\n margin:0 auto; width:200px; border:1px solid orange;}\n小提琴： http: //jsfiddle.net/S9upd/4/
\n\n我已经通过浏览器截图运行了这个，看起来不错；如果没有别的原因，我将保留下面的原始内容，以便 CSS 规范所规定的边距百分比处理能够见光。
\n\n看来我参加聚会迟到了！
\n\n上面有一些评论表明这是一个 CSS 问题 - 关注点与全部分离。让我先说一下 CSS确实是搬起石头砸自己的脚。我的意思是，这样做有多容易：
\n\n.container {\n position:absolute;\n left: 50%;\n top: 50%;\n overflow:visible;\n}\n.content {\n position:relative;\n margin:-50% 50% 50% -50%;\n}\n正确的？容器的左上角将位于屏幕的中心，并且在负边距的情况下，内容将神奇地重新出现在页面的绝对中心！http://jsfiddle.net/rJPPc/
\n\n错误的！水平定位还可以，但是垂直定位……哦，我明白了。显然，在 css 中，当以 % 为单位设置上边距时，该值总是相对于包含块的宽度计算为百分比。就像苹果和橘子一样！如果您不信任我或 Mozilla doco，请通过调整内容宽度来玩一下上面的小提琴，您会感到惊讶。
\n\n现在，CSS 成为我的面包和黄油，我不打算放弃。同时，我更喜欢简单的事情，所以我借鉴了捷克 CSS 大师的发现的发现，并将其变成了一个可行的小提琴。长话短说，我们创建一个表，其中垂直对齐设置为中间：
\n\n<table class="super-centered"><tr><td>\n <div class="content">\n <p>I am centered like a boss!</p>\n </div>\n</td></tr></table>\n并且内容的位置使用旧的margin:0 auto 进行了微调；:
\n\n.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}\n.content {margin:0 auto;width:200px;}\xe2\x80\x8b\n按照承诺工作小提琴： http://jsfiddle.net/teDQ2/
\n