Использование jQuery для центрирования DIV на экране

Я строю это регулярно, чтобы проверить месяц 30/31 и пусть февраль до 29.

new RegExp(/^((0[1-9]|[12][0-9]|3[01])(\/)(0[13578]|1[02]))|((0[1-9]|[12][0-9])(\/)(02))|((0[1-9]|[12][0-9]|3[0])(\/)(0[469]|11))(\/)\d{4}$/)

Я думаю, он более простой и более гибкий и достаточно полный.

Возможно Первая часть может заключаться в контракте, но я не нашел должным образом.

742
задан John Slegers 16 March 2016 в 16:29
поделиться

6 ответов

Мне нравится добавлять функции к 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();

Демонстрация: Скрипка (с добавленным параметром)

1057
ответ дан 8 revs, 6 users 61% 16 March 2016 в 16:29
поделиться

Это не тестируется, но что-то вроде этого должно работать.

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});
5
ответ дан Andrew Hedges 16 March 2016 в 16:29
поделиться

Я поместил плагин 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});
    });
);

, правильно?

ОБНОВЛЕНИЕ:

Из CSS-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}
141
ответ дан 22 November 2019 в 21:26
поделиться

Компонент перехода этой функции очень плохо работал у меня в 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);
4
ответ дан 22 November 2019 в 21:26
поделиться

Я не думаю, что абсолютная позиция будет лучше, если вы хотите, чтобы элемент всегда был по центру в середине страницы. Вероятно, вам нужен фиксированный элемент. Я нашел еще один плагин центрирования jquery, который использовал фиксированное позиционирование. Он называется фиксированным центром .

6
ответ дан 22 November 2019 в 21:26
поделиться

вы получаете такой плохой переход, потому что вы изменяете положение элемента каждый раз, когда документ прокручивается. Вам нужно использовать фиксированное позиционирование. Я попробовал вышеупомянутый плагин с фиксированным центром, и, похоже, он отлично решает эту проблему. Фиксированное позиционирование позволяет вам центрировать элемент один раз, а свойство CSS будет заботиться о поддержании этого положения при каждой прокрутке.

0
ответ дан 22 November 2019 в 21:26
поделиться
Другие вопросы по тегам:

Похожие вопросы: