0

Добрый день! Подскажите, пожалуйста, почему блок сразу при открытии не становится по центру вертикали и горизонтали, а центрируется только при ресайзе страницы, где ошибка? При этом разметка и стиль не должны меняться. Благодарю!

$(window).resize(function(){
    $('.div_body').css({
        position:'absolute',
        left: ($(window).width() - $('.div_body').outerWidth())/2,
        top: ($(window).height() - $('.div_body').outerHeight())/2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.div_overlay {
  background-color: rgba(0,0,0,1);
}
.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="div_overlay">
<div class="div_body">Много много текста</div>
</div>
</div>

2
  • 1
    поместите Ваш код внутри $(document).ready(function(){ ... });
    – user176262
    Commented 23 авг. 2017 в 14:00
  • У Вас кастомный шрифт?
    – Oleg
    Commented 23 авг. 2017 в 14:05

2 ответа 2

6

У .div_body изначально не установлено абсолютное позиционирование, поэтому его ширина в начале равна ширине окна.

Сделайте либо так

$(window).resize(function() {
  $('.div_body')
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
  position: absolute
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

либо установите это свойство при назначении обработчика

$('.div_body').css({position:'absolute'});
$(window).resize(function() {
  $('.div_body')
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

или в обработчике вначале установите позиционирование, а потом добавьте координаты

$(window).resize(function() {
  $('.div_body')
    .css({
      position: 'absolute'
    })
    .css({
      left: ($(window).width() - $('.div_body').outerWidth()) / 2,
      top: ($(window).height() - $('.div_body').outerHeight()) / 2
    });
});
$(window).resize();
.div,
.div_overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.div_overlay {
  background-color: rgba(0, 0, 0, 1);
}

.div_body {
  background: chocolate;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  <div class="div_overlay">
    <div class="div_body">Много много текста</div>
  </div>
</div>

1
  • +1 position:absolute; в .div_body
    – user176262
    Commented 23 авг. 2017 в 14:09
1

Потому что вы вызываете позиционирование DIV при resize(), т.е срабатывает после изменения окна, документация . Если вы хотите по какой то причине сделать центровку блоков именно через Jquery вам просто надо сделать так (после загрузки страницы):

   jQuery(document).ready(function(j){
getCenter();

$(window).resize(function(){
getCenter();
});

    });
    function getCenter(){
 $('.div_body').css({
            position:'absolute',
            left: ($(window).width() - $('.div_body').outerWidth())/2,
            top: ($(window).height() - $('.div_body').outerHeight())/2
        });
}
1
  • Поэтому вам надо использовать до и после маштабирования, обновлю ответ
    – Арсен
    Commented 23 авг. 2017 в 13:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.