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

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

739 голосов
/ 17 октября 2008

Как мне установить <div> в центре экрана с помощью jQuery?

Ответы [ 26 ]

0 голосов
/ 17 октября 2013

Нет необходимости JQuery для этого

Я использовал это, чтобы центрировать элемент Div. Css Style, 

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Открытый элемент 

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});
0 голосов
/ 30 мая 2011

Почему вы не используете CSS для центрирования div? 

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}
0 голосов
/ 16 марта 2016

Обычно я делал бы это только с помощью CSS ... но так как вы попросили вас сделать это с помощью jQuery ...

Следующий код центрирует div по горизонтали и вертикали внутри его контейнера: 

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(см. Также эту скрипку )

0 голосов
/ 07 июля 2010

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

0 голосов
/ 15 марта 2018

CSS решение Только в две строки

Он централизует ваш внутренний div по горизонтали и вертикали. 

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

}

только для выравнивания по горизонтали, изменить 

margin: 0 auto;

, а для вертикали изменить 

margin: auto 0;
0 голосов
/ 04 июня 2012

Вот моя версия. Я могу изменить его после того, как посмотрю на эти примеры. 

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};
Страница:
...