매우 짧은 버전:
$('#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({위치:'절대', 여백: 0, 상단: (상단 > 0 ? 상단: 0) 'px', 왼쪽: (왼쪽 > 0 ? 왼쪽: 0) 'px'});
});
}
} );
})(jQuery);
이 코드로 활성화됨:
$('#mainDiv').center();
플러그인 버전
(function($){
$.fn.extend({
center: 함수(옵션) {
var options = $.extend({ // 기본값
inside:window, // 요소, 창 중심
전환: 0, // 밀리초, 전환 시간
minX:0, // 픽셀, 최소 왼쪽 요소 값
minY:0, // 픽셀, 최소 상단 요소 값
withScrolling:true, // 부울, 스크롤 막대 관리(scrollTop)
Vertical:true, // 부울, 중앙 수직
수평: true // , 중앙 가로
}, 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 = $(option s. 내부).scrollLeft() || 0;
왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
$.extend(props, {왼쪽: 왼쪽 '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});
});
);